移動端touch、click、tap的區別

標籤：手機   click   prevent   前端   比較   解決辦法   0ms   區別   read   

一、click 與tap比較

click與tap都會出發點擊事件，但是在手機web端，click會有200-300ms延遲，所以一般用tap（輕擊）代替click作為點擊事件。singleTap 和 doubleTap分別代表單擊和雙擊。

二、使用tap會出現點透事件（事件穿透）

很多用過Zepto（移動端開發的庫）都說使用tap會出現點透事件。

1、什麼是tap事件穿透

執行完上層綁定的tap事件後，下層如果綁定著click事件或者本身就存在點擊事件(a/input)也會預設觸發，這就是點透事件，

2、出現點透事件的原因

首先要知道tap事件是通過監聽綁定document上的touch事件來類比的，並且tap 事件是冒泡到document上才出發的；

touchstart：在這個dom上用手觸摸就能開始

click：在這個dom上用手觸摸，且手指未曾移動，且在這個dom上手指離開螢幕，且觸摸和離開時間很短（有的瀏覽器可能不檢測時間間隔，照樣可以出發click），才開始觸發。

也就是說在移動端的事件觸發從早到晚排序：touchstart touchstop  click。所以click的觸發是有延時的，大約300ms，所以click觸發的原則是，觸發當前有click的元素，且該元素麵朝使用者的最前端，才會觸發click。

3、解決辦法

（1）github上有一個叫做fastclick的庫https://github.com/ftlabs/fastclick

在dom ready時初始化在body上，如：

$(function(){    newFastClick(document.body);})

然後給需要“無延遲點擊”的元素繫結click事件即可。實戰開發中，click響應速度比tap還要快一點。

（2）為元素繫結touchend事件，並在內部加上e.preventDefault();

$A.on(‘touchend‘,function(e){//而touchend是原生的事件，在dom本身上就會被捕獲觸發     $demo.hide()    e.preventDefault(); })

監聽touchend事件，阻止A元素的touchend的預設行為，從而阻止click事件的產生.

三、touch事件

主要有

touchstart事件：當手機觸控螢幕幕時觸發，即使已經有一個手指放在螢幕上也會觸發。

touchmove事件：當手指在螢幕上華東法人時候連續地觸發。在這個事件發生期間，調用preventDefault（）事件可以阻止滾動。

touchend事件：當手指從螢幕上離開的時候觸發。

touchcancel事件：當系統停止跟蹤觸摸的觸發。關於這個實際的確切觸發時間。

每個觸摸事件都包括了三個觸摸列表：

1.touches：當前位於螢幕上的所有手指的一個列表。

2.targetTouches：位於當前DOM元素上的手指的一個列表。

3.changedTouches：涉及當前事件的手指的一個列表。

例如，在一個touchend事件中，這就會是移開的手指。

這些列表由包含了觸摸資訊的對象組成：

1.identifier：一個數值，唯一標識觸摸會話（touchsession）中的當前手指。

2.target：DOM元素，是動作所針對的目標。

3.客戶/頁面/螢幕座標：動作在螢幕上發生的位置。

4.半徑座標和rotationAngle：畫出大約相當於手指形狀的橢圓形。

 

---------------------------------------------------

 

移動端touch、click、tap的區別