前端的很多事件在PC端和瀏覽器端可公用，但有些事件卻只在移動端產生，如觸摸相關的事件

本文整理了移動端常見的一些事件，包括原生支持的click、touch、tap、swipe事件，也有定義型的gesture手勢事件（目前只是一個概念，使用的時候需封裝模擬）

使用到的是移動端的Chrome瀏覽器，本文只對該瀏覽器進行調試，其他瀏覽器暫未考慮到

?

一、事件定義及分類

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：手指在屏幕上向下滑動時會觸發

?

二、事件的觸發

頁面結構：

1 <style type="text/css"> 2 #test { 3 overflow: hidden; 4 margin: 50px auto; 5 width: 300px; 6 height: 300px; 7 border: 1px solid #ccc; 8 } 9 .one, 10 .two { 11 float: left; 12 margin: 10px; 13 width: 100px; 14 height: 100px; 15 text-align: center; 16 line-height: 100px; 17 font-size: 32px; 18 } 19 .one { 20 background-color: #ccc; 21 } 22 .two { 23 background-color: #999; 24 } 25 </style> 26 27 28 <div id="test"> 29 <div class="one">one</div> 30 <div class="two">two</div> 31 </div>

1. 原生腳本監聽

　1)?查看事件的觸發及順序

1 var test = document.getElementById('test'); 2 var one = document.querySelector('.one'); 3 var two = document.querySelector('.two'); 4 5 function addEvent(elem, type, showAll) { 6 type = type.split(' '); 7 8 type.forEach(function(item) { 9 elem.addEventListener(item, function(ev) { 10 console.log(showAll ? ev : ev.type); 11 }); 12 }); 13 } 14 15 addEvent(one, 'tap click touchstart touchmove touchend touchcancel swipe swipeLeft swipeRight swipeUp swipeDown longTap singleTap doubleTap', false);

點一下，如圖為相關事件觸發的順序，可以看到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

?

還有其他事件有待發覺...

?

?

?

?

gestureend?

總結

以上是生活随笔為你收集整理的移动端前端常见的触摸相关事件touch、tap、swipe等整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。