移動端300ms與點透總結

2022-01-19 15:09:02 字數 588 閱讀 4401

為啥會出現300ms延遲現象

下列情況不會出現300ms延遲

發生情況:

a,b兩個層上下重疊在z軸中

繫結touchstart/touchend事件,使上層的a點選後消失

b預設有click事件或b繫結了click事件

為什麼會產生點透:

移動端事件執行順序:touchstart -> touchend -> click

解決方案:

盡量用touch事件替換click事件

阻止a標籤的click的情況:在消失元素的touchstart/touchend事件,呼叫event.preventdefault或者event.returnvalue = false

a和b都用click事件做繫結

fastclick原理(在body中繫結監聽事件,然後做出判斷,是否需要呼叫preventdefault來處理)

移動端click事件300ms延遲

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

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

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

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

移動端300ms延遲 一般情況下,如果沒有經過特殊處理,移動端瀏覽器在派發點選事件的時候,通常會出現300ms左右的延遲。原因 移動端的檢測網頁雙擊縮放機制,300ms內雙擊兩次則執行縮放操作 解決方法 1.css的touch action chrome36開始支援 2.fastclick 移動端點...