手機端 click 事件 300ms 左右延遲

延遲緣由

早期在iPhone的Safari瀏覽器中，爲了實現雙擊放大效果，當用戶點擊屏幕時會判斷在300ms內(注意：300ms是在touchend以後)是否有第二次點擊，若是有就是雙擊，若是沒就是單擊，觸發click事件。此過程可拆解爲：touchstart->touchmove->touchend->click

解決思路

touchstart/touchend是沒有延遲的，能夠用touchend來模擬快速點擊行爲。zepto的tap或fastclick.js都是這個原理，只是zepto的tap事件統一在document的touchend時觸發的。

延遲致使問題及解決方法

• zepto tap穿透
  • 現象描述：遮罩層中有一個標籤綁定tap事件，觸發此事件遮罩層消失，該標籤下方有一個綁定click事件的元素。當點擊上層標籤時，同時也觸發下層元素的click事件。
  • 緣由：touchend後繼續等待300ms發現沒有其餘行爲了，則繼續觸發click，因爲這時遮罩層已經消失，因此當前click事件的target就在底層元素上。
  • 解決方法：
    • 直接將上層元素的tap事件換成click事件（會出現300ms的延遲觸發事件）。
    • 能夠給元素的消失作一個fade效果，相似jQuery裏的fadeOut，並設置動畫duration大於300ms，這樣當延遲的 click 觸發時，就不會「穿透」到下方的元素了。
    • 使用fastclick.js
• H5頁面click事件反映遲鈍：使用fastclick.js

$(function() {
	FastClick.attach(document.body);
});
複製代碼

參考連接