移動端web開發，click touch tap區別

移動端用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的觸發