轉自：
http://blog.csdn.net/sly94/article/details/51701188
移動端用tap時會有穿透問題

一：click與tap比較

click與tap都會觸發點擊事件，但是在手機web端，click會有200-300ms的延遲，所以一般用tap代替click作為點擊事件。singleTap 和doubleTap分別代表單次點擊和雙次點擊

二：tap的穿透處理

使用zepto框架的tap的點擊事件，來規避click事件的延遲響應，會出現穿透，即點擊會觸發非當前層的點擊事件。

三：穿透原因

問題：在HTML5點擊了q以后，彈出b的彈框

因為tap事件是通過document綁定了touchstart和touchend事件實現，$('.q')上，當touchend事件冒泡到document上以后執行$(this).hide();此時$('.b'),就處在了頁面的最前面

現在touchend冒泡到了document上，并且$('.b')在頁面的最前面，然后就觸發了click事件

四：解決穿透問題

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后，click響應速度比tap還要快一點。

2.為元素綁定touchend事件，并在內部加上e.preventDefault();

$demo.on('touchend',function(e){

//改變了事件名稱，tap是body上才被觸發，而touchend是原生的事件，在dom本身上就會被捕獲觸發

$demo.hide();

e.preventDefault();//阻止“默認行為”

});

五：touch事件

touch是針對觸屏手機上的觸摸事件。現金大多數觸屏手機webkit內核提供了touch事件的監聽

包含：touchstart touchmove touchend touchcancel四個事件

touchstart touchmove touchend事件可以類比于mousedown mouseover mouseup的觸發

總結

以上是生活随笔為你收集整理的移动端web开发，click touch tap区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。