移動端WEB開發，click,touch,tap事件淺析

標籤：mic   直接   UI   pre   多次   end   針對   版本   雙擊   

一、click 和 tap 比較

兩者都會在點擊時觸發，但是在手機WEB端，click會有 200~300 ms，所以請用tap代替click作為點擊事件。

singleTap和doubleTap 分別代表單次點擊和雙次點擊。

二、關於tap的點透處理

在使用zepto架構的tap來行動裝置瀏覽器內的點擊事件，來規避click事件的延遲響應時，有可能出現點透的情況，即點擊會觸發非當前層的點擊事件。

處理方式：

（1）、

github上有一個叫做fastclick的庫，它也能規避行動裝置上click事件的延遲響應，https://github.com/ftlabs/fastclick
將它用script標籤引入頁面（該庫支援AMD，於是你也可以按照AMD規範，用諸如require.js的模組載入器引入），並且在dom ready時初始化在body上，如：

$(function(){    newFastClick(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的觸發。

touchstart ： 當手指觸摸到螢幕會觸發；

touchmove : 當手指在螢幕上移動時，會觸發；

touchend : 當手指離開螢幕時，會觸發；

而touchcancel許多人不知道它在什麼時候會被觸發而忽略它，其實當你的手指還沒有離開螢幕時，有系統級的操作發生時就會觸發touchcancel，例如alert和confirm彈框，又或者是android系統的功能彈窗。

例如：

 

這4個事件的觸發順序為：

touchstart -> touchmove
-> …… -> touchmove ->touchend

但是單憑監聽上面的單個事件，不足以滿足我們去完成監聽在觸屏手機常見的一些手勢操作，如雙擊、長按、左右滑動、縮放等手勢操作。需要組合監聽這些事件去封裝對這類手勢動作。

其實市面上很多架構都針對手機瀏覽器封裝了這些手勢，例如jqmobile、zepto、jqtouch，不過悲劇發生了，對於某些android系統（我自己測試到的在android 4.0.x），touchmove和touchend事件不能被很好的觸發，舉例子說明下：

比如手指在螢幕由上向下拖動頁面時，理論上是會觸發 一個 touchstart ，很多次 touchmove
，和最終的 touchend ，可是在android 4.0上，touchmove只被觸發一次，觸發時間和touchstart
差不多，而touchend直接沒有被觸發。這是一個非常嚴重的bug，在google Issue已有不少人提出  http://code.google.com/p/android/issues/detail?id=19827

暫時我只發現在android 4.0會有這個bug，據說 ios 3.x的版本也會有。

而顯然jqmobile、zepto等都沒有意識到這個bug監聽實現帶來的嚴重影響，所以在直接使用這些架構的event時，或多或少會出現相容性問題！

(原文連結：閱讀詳情 )

移動端WEB開發，click,touch,tap事件淺析