轉(zhuǎn)自：
http://blog.csdn.net/sly94/article/details/51701188
移動(dòng)端用tap時(shí)會(huì)有穿透問(wèn)題

一：click與tap比較

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

二：tap的穿透處理

使用zepto框架的tap的點(diǎn)擊事件，來(lái)規(guī)避click事件的延遲響應(yīng)，會(huì)出現(xiàn)穿透，即點(diǎn)擊會(huì)觸發(fā)非當(dāng)前層的點(diǎn)擊事件。

三：穿透原因

問(wèn)題：在HTML5點(diǎn)擊了q以后，彈出b的彈框

因?yàn)閠ap事件是通過(guò)document綁定了touchstart和touchend事件實(shí)現(xiàn)，$('.q')上，當(dāng)touchend事件冒泡到document上以后執(zhí)行$(this).hide();此時(shí)$('.b'),就處在了頁(yè)面的最前面

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

四：解決穿透問(wèn)題

1.github上有一個(gè)叫做fastclick的庫(kù)，它能規(guī)避移動(dòng)設(shè)備上click事件的延遲響應(yīng)https://github.com/ftlabs/fastclick將它用script標(biāo)簽引入頁(yè)面(該庫(kù)支持AMD，可按照AMD規(guī)范，用require.js的模塊加載器引入)，并且在dom ready時(shí)初始化在body上，如：

$(function(){

new FastClick(document.body);

})

然后給需要“無(wú)延遲點(diǎn)擊”的元素綁定click事件（注意不再是綁定zepto的tap事件）即可。

也可以不在body上初始化它，而在某個(gè)dom上初始化，這樣，只有設(shè)個(gè)dom和它的子元素才能享受"無(wú)延遲"的點(diǎn)擊

實(shí)踐開(kāi)發(fā)中，當(dāng)元素綁定fastclick后，click響應(yīng)速度比tap還要快一點(diǎn)。

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

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

//改變了事件名稱(chēng)，tap是body上才被觸發(fā)，而touchend是原生的事件，在dom本身上就會(huì)被捕獲觸發(fā)

$demo.hide();

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

});

五：touch事件

touch是針對(duì)觸屏手機(jī)上的觸摸事件。現(xiàn)金大多數(shù)觸屏手機(jī)webkit內(nèi)核提供了touch事件的監(jiān)聽(tīng)

包含：touchstart touchmove touchend touchcancel四個(gè)事件

touchstart touchmove touchend事件可以類(lèi)比于mousedown mouseover mouseup的觸發(fā)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。