移動端touch、click、tap的區別


一、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:畫出大約相當於手指形狀的橢圓形。

 

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

 


免責聲明!

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



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