移動端web，tap與click事件

1、tap與click的區別

二者都會在點擊時系統自動觸發，可是在手機WEB端，click會有 200~300 ms。延遲來自判斷雙擊和長按，由於只有默認等待時間結束以肯定沒有後續動做發生時，纔會觸發click事件。因此觸摸事件反應更快，體驗更好。
singleTap和doubleTap 分別表明單次點擊和雙次點擊。
tap封裝了touchstart、touchmove、touchend三個事件的處理（touchstart以後若是有產生touchmove則取消這次tap事件的產生） click則只是單純的綁定了瀏覽器的click事件。

2、tap事件點透問題

點擊會觸發非當前層的點擊事件，這就是點透。例如：點擊a可是同時觸發了b元素的click事件，由於tap事件是經過document綁定了touchstart和touchend事件實現，$('.a')上，當touchend事件冒泡到document上之後執行$(this).hide();此時$('.b'),就處在了頁面的最前面，如今touchend冒泡到了document上，而且$('.b')在頁面的最前面，而後就觸發了click事件。

3、tap事件點透解決

1.github上有一個叫作fastclick的庫，它能規避移動設備上click事件的延遲響應https://github.com/ftlabs/fastclick將它用script標籤引入頁面(該庫支持AMD，可按照AMD規範，用require.js的模塊加載器引入)，而且在dom ready時初始化在body上，如：
$(function(){
new FastClick(document.body);
})
而後給須要「無延遲點擊」的元素綁定click事件（注意再也不是綁定zepto的tap事件）便可。
也能夠不在body上初始化它，而在某個dom上初始化，這樣，只有設個dom和它的子元素才能享受"無延遲"的點擊。
由於fastclick源碼不依賴其餘庫因此你能夠在原生的js前直接加上
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
或者有zepto或者jqm的js裏面加上
$(function() {
FastClick.attach(document.body);
});
固然require的話就這樣：
var FastClick = require("fastclick");
FastClick.attach(document.body, options);
實踐開發中，當元素綁定fastclick後，click響應速度比tap還要快一點。
2.對於B元素自己存在默認click事件的狀況，應用touchend代替tap事件並阻止掉A元素touchend的默認行爲preventDefault()，從而阻止click事件的產生。
$("#aa").on("touchend", function (event) {
//不少處理好比隱藏什麼的
event.preventDefault();
});
對於B元素自己沒有默認click事件的狀況（無a標籤等），應統一使用touch事件，統一代碼風格，而且因爲click事件在移動端的延遲要大不少，不利於用戶體驗，因此關於觸摸事件應儘可能使用touch相關事件。

延遲必定的時間(300ms+)來處理事件
$("#aa").on("tap", function (event) {
setTimeout(function(){
//不少處理好比隱藏什麼的
},320);
});
這種方法其實很好，能夠和fadeInIn/fadeOut等動畫結合使用，能夠作出過分效果

理論上上面的方法能夠完美的解決tap的點透問題，若是真的倔強到不行，改用click。特別是對於遮蓋浮層，因爲遮蓋浮層的點擊即便有小延遲也是沒有關係的，反而會有疑似更好的用戶體驗，因此這種狀況，能夠針對遮蓋浮層本身採用click事件，這樣就不會出現點透問題。

如何解決穿透：

方法一：直接將上層元素的tap事件換成click事件（會出現300ms的延遲觸發事件）

方法二：在click事件觸發前阻止它，如在touchend的事件中使用e.preventDefault()來阻止後續的click事件

zepto爲什麼不使用e.preventDefault()來解決穿透問題？

由於zepto的tap事件統一是在document的touchend時觸發的，若在這裏使用e.preventDefault()，那頁面上全部元素在touchend後觸發的事件都不會被執行了。