行動端WEB開發中click,touch,tap事件使用詳解-H5教程-PHP中文網

行動端WEB開發中click,touch,tap事件使用詳解

php中世界最好的语言

發布： 2018-06-04 11:54:14

原創

5818 人瀏覽過

這次帶給大家行動端WEB開發中click,touch,tap事件使用詳解，行動端WEB開發中click,touch,tap事件所使用的##注意事項有哪些，下面就是實戰案例，一起來看一下。

一、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(&#39;touchend&#39;,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時，或多或少會出現相容性問題！

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！