移動端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('touchend',function(e){//改變了事件名稱,tap是在body上才被觸發,而touchend是原生的事件,在dom本身上就會被捕獲觸發
    $demo.hide()
    e.preventDefault();//阻止“默認行為”
})
三、touch事件touch是針對觸屏手機上的觸摸事件。現今大多數觸屏手機webkit內核提供了 touch事件的監聽,讓開發者可以獲取用戶觸摸屏幕時的一些信息。

 

其中包括:touchstart,touchmove,touchend,touchcancel 這四個事件

touchstart,touchmove,touchend事件可以類比於mousedown,mouseovermouseup的觸發。

touchstart : 當手指觸摸到屏幕會觸發;

touchmove : 當手指在屏幕上移動時,會觸發;

touchend : 當手指離開屏幕時,會觸發;

當然還有一個touchcancel,是在拖動中斷時候觸發。

例如:

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

touchmove-> …… -> touchmove ->touchend

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

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

比如手指在屏幕由上向下拖動頁面時,理論上是會觸發 一個 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時,或多或少會出現兼容性問題


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM