移動端點透問題和300ms延遲的解決方法

2022-05-28 05:45:07 字數 573 閱讀 5930

移動端300ms延遲:

一般情況下,如果沒有經過特殊處理,移動端瀏覽器在派發點選事件的時候,通常會出現300ms左右的延遲。

原因:移動端的檢測網頁雙擊縮放機制,300ms內雙擊兩次則執行縮放操作

解決方法:1.css的touch-action(chrome36開始支援)2.fastclick

移動端點透問題:

假如頁面上有兩個元素a和b。b元素在a元素之上。我們在b元素的touchstart事件上註冊了乙個**函式,該**函式的作用是隱藏b元素。我們發現,當我們點選b元素,b元素被隱藏了,隨後,a元素觸發了click事件。這是因為在移動端瀏覽器,事件執行的順序是touchstart > touchend > click。而click事件有300ms的延遲,當touchstart事件把b元素隱藏之後,隔了300ms,瀏覽器觸發了click事件,但是此時b元素不見了,所以該事件被派發到了a元素身上。如果a元素是乙個鏈結,那此時頁面就會意外地跳轉。

解決方法:1.在touch的**函式裡加入preventdefault() 2.fastclick

總結自:

移動端click事件300ms延遲

一般情況下,如果沒有經過特殊處理,移動端瀏覽器在派發點選事件的時候,通常會出現300ms左右的延遲。也就是說,當我們點選頁面的時候移動端瀏覽器並不是立即作出反應,而是會等上一小會兒才會出現點選的效果。在移動web興起的初期,使用者對300ms的延遲感覺不明顯。但是,隨著使用者對互動體驗的要求越來越高...

移動端300ms與點透總結

為啥會出現300ms延遲現象 下列情況不會出現300ms延遲 發生情況 a,b兩個層上下重疊在z軸中 繫結touchstart touchend事件,使上層的a點選後消失 b預設有click事件或b繫結了click事件 為什麼會產生點透 移動端事件執行順序 touchstart touchend c...

移動端300ms相容問題(移動端經典問題)

2007 年初。蘋果公司在發布首款 iphone 前夕,遇到乙個問題 當時的 都是為大螢幕裝置所設計的。於是蘋果的工程師們做了一些約定,應對 iphone 這種小螢幕瀏覽桌面端站點的問題。雙擊縮放 double tap to zoom 這也是會有上述 300 毫秒延遲的主要原因。雙擊縮放,即用手指在...