移動端觸摸相關事件touch、tap、swipe

標籤：div   tps   概念   com   htm   內容   事件觸發   屬性   0ms   

一、事件定義及分類

1. click事件

單擊事件，類似於PC端的click，但在移動端中，連續click的觸發有200ms ~ 300ms的延遲

 

2. touch類事件

觸摸事件，有touchstart touchmove touchend touchcancel 四種之分

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

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

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

touchcancel：可由系統進行的觸發，比如手指觸控螢幕幕的時候，突然alert了一下，或者系統中其他打斷了touch的行為，則可以觸發該事件

 

3. tap類事件

觸碰事件，我目前還不知道它和touch的區別，一般用於代替click事件，有tap longTap singleTap doubleTap四種之分

tap: 手指碰一下螢幕會觸發

longTap: 手指長按螢幕會觸發

singleTap: 手指碰一下螢幕會觸發

doubleTap: 手指雙擊螢幕會觸發

 

4. swipe類事件

滑動事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五種之分

swipe：手指在螢幕上滑動時會觸發

swipeLeft：手指在螢幕上向左滑動時會觸發

swipeRight：手指在螢幕上向右滑動時會觸發

swipeUp：手指在螢幕上向上滑動時會觸發

swipeDown：手指在螢幕上向下滑動時會觸發

 

點一下，為相關事件觸發的順序，可以看到click事件在touchend之後

快速點兩下，為相關事件觸發的順序，可以看到click事件因為延遲的原因只觸發了一次

長按，為相關事件觸發的順序

向右滑動一下，為相關事件觸發的順序

長按的時候無意間觸發了瀏覽器自身的複製文本功能，此時觸發了touchcancel事件

 

　2) 查看觸發的事件對象

簡單地修改，將事件監聽中第三個參數置為true，輸出完整的事件對象

addEvent(one, ‘tap click touchstart touchmove touchend touchcancel swipe swipeLeft swipeRight swipeUp swipeDown longTap singleTap doubleTap‘, true);

這裡重點關注這三個屬性changedTouches、targetTouches、touches，第三方外掛程式封裝類比其他事件時，常常用到這幾個屬性

changedTouches：儲存了所有引發事件的手指資訊

targetTouches：儲存了當前所觸碰螢幕的手指資訊

touches：儲存了當前所有觸碰螢幕的手指資訊

 

2. 第三方外掛程式監聽

  1) 使用jquery

　　為了查看三個屬性的區別，簡單地只監聽一個事件

<script src="jquery.js"></script>

$(‘.one, .two, #test‘).on(‘touchstart‘, function(ev) {    ev.stopPropagation();     console.log(ev);});

按順序分五次觸碰螢幕，發現event對象裡沒有那三個屬性

 

  2) 改用zepto.js正常

<script src="zepto.js"></script>

看第五次的touch

看第二次的touch

看第四次的touch

由此可知:

touches記錄的是螢幕上全部的觸摸對象的資訊

targetTouches記錄的是當前DOM節點上全部的觸摸對象的資訊

changedTouches記錄著觸發該次事件的資訊，一般長度為1

 

相應的數組對象內部為一系列座標屬性，可用來類比其他事件如gesture手勢事件等

 

三、自訂手勢事件gesture

手勢事件只是概念型，目前還沒有瀏覽器原生支援，按照概念可分為gesturestart gesturechange gestureend 三種事件

gesturestart：當有兩根或多根手指放到螢幕上的時候觸發

gesturechange：當有兩根或多根手指在螢幕上，並且有手指移動的時候觸發

gestureend：當倒數第二根手指提起的時候觸發，結束gesture

 

按照定義，當分別將兩根手指放到螢幕上的時候，會有如下順序的事件觸發：

1、第一根手指放下，觸發touchstart

2、第二根手指放下，觸發gesturestart

3、觸發第二根手指的touchstart

4、立即觸發gesturechange

5、手指移動，持續觸發gesturechange

6、第二根手指提起，觸發gestureend，以後將不會再觸發gesturechange

7、觸發第二根手指的touchend

8、觸發touchstart（多根手指在螢幕上，提起一根，會重新整理一次全域 touch，重新觸發第一根手指的touchstart）

9、提起第一根手指，觸發touchend

 

內容參考：https://www.cnblogs.com/imwtr/p/5882166.html

 

移動端觸摸相關事件touch、tap、swipe