前端的很多事件在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
還有其他事件有待發覺...