移動端事件
一、事件定義及分類
1. click事件
單擊事件，類似于PC端的click，但在移動端中，連續(xù)click的觸發(fā)有200ms ~ 300ms的延遲
2. touch類事件
觸摸事件，有touchstart touchmove touchend touchcancel 四種之分
touchstart：手指觸摸到屏幕會觸發(fā)
ulw.addEventListener("touchstart", function (e) {
console.log(e.targetTouches[0]);
? ? console.log(e.touches[0]);? ? // 觸摸是觸發(fā)事件， 這個是最常用的
? ? console.log(e.changedTouches[0]); // 觸摸改變時觸發(fā)事件，
});
touchmove：當(dāng)手指在屏幕上移動時，會觸發(fā)
ulw.addEventListener("touchmove", function (e) {
console.log(e);
? ? console.log(e.targetTouches[0]);
? ? console.log(e.touches[0]);? ? // 觸摸是觸發(fā)事件， 這才是最常用的
? ? console.log(e.changedTouches[0]); // 觸摸改變時觸發(fā)事件，
});
touchend：當(dāng)手指離開屏幕時，會觸發(fā)
ulw.addEventListener("touchend", function (e) {
touchend里面只有changedTouches[0]里面才有window坐標的那些屬性。
? ? console.log(e);
? ? console.log(e.changedTouches[0]);
});
touchcancel：可由系統(tǒng)進行的觸發(fā)，比如手指觸摸屏幕的時候，突然alert了一下，或者系統(tǒng)中其他打斷了touch的行為，則可以觸發(fā)該事件
3. tap類事件
觸碰事件，我目前還不知道它和touch的區(qū)別，一般用于代替click事件，有tap longTap singleTap doubleTap四種之分
tap: 手指碰一下屏幕會觸發(fā)
longTap: 手指長按屏幕會觸發(fā)
singleTap: 手指碰一下屏幕會觸發(fā)
doubleTap: 手指雙擊屏幕會觸發(fā)
4. swipe類事件
滑動事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五種之分
swipe：手指在屏幕上滑動時會觸發(fā)
swipeLeft：手指在屏幕上向左滑動時會觸發(fā)
swipeRight：手指在屏幕上向右滑動時會觸發(fā)
swipeUp：手指在屏幕上向上滑動時會觸發(fā)
swipeDown：手指在屏幕上向下滑動時會觸發(fā)
移動端觸屏滑動的效果其實就是圖片輪播，在PC的頁面上很好實現(xiàn)，綁定click和mouseover等事件來完成。但是在移動設(shè)備上，要實現(xiàn)這種輪播的效果，就需要用到核心的touch事件。處理touch事件能跟蹤到屏幕滑動的每根手指。
前端的很多事件在PC端和瀏覽器端可公用，但有些事件卻只在移動端產(chǎn)生，如觸摸相關(guān)的事件
本文整理了移動端常見的一些事件，包括原生支持的click、touch、tap、swipe事件，也有定義型的gesture手勢事件（目前只是一個概念，使用的時候需封裝模擬）
使用到的是移動端的Chrome瀏覽器，本文只對該瀏覽器進行調(diào)試，其他瀏覽器暫未考慮到
以下是四種touch事件touchstart: //手指放到屏幕上時觸發(fā)touchmove: //手指在屏幕上滑動式觸發(fā)touchend: //手指離開屏幕時觸發(fā)touchcancel: //系統(tǒng)取消touch事件的時候觸發(fā)，這個好像比較少用
每個觸摸事件被觸發(fā)后，會生成一個event對象，event對象里額外包括以下三個觸摸列表
touches: //當(dāng)前屏幕上所有手指的列表targetTouches: //當(dāng)前dom元素上手指的列表，盡量使用這個代替toucheschangedTouches: //涉及當(dāng)前事件的手指的列表，盡量使用這個代替touches這些列表里的每次觸摸由touch對象組成，touch對象里包含著觸摸信息，主要屬性如下：clientX / clientY: //觸摸點相對瀏覽器窗口的位置pageX / pageY: //觸摸點相對于頁面的位置screenX / screenY: //觸摸點相對于屏幕的位置identifier: //touch對象的IDtarget: //當(dāng)前的DOM元素
注意：
手指在滑動整個屏幕時，會影響瀏覽器的行為，比如滾動和縮放。所以在調(diào)用touch事件時，要注意禁止縮放和滾動。
1.禁止縮放通過meta元標簽來設(shè)置。
2.禁止?jié)L動preventDefault是阻止默認行為，touch事件的默認行為就是滾動。event.preventDefault();
touches記錄的是屏幕上全部的觸摸對象的信息
targetTouches記錄的是當(dāng)前DOM節(jié)點上全部的觸摸對象的信息
changedTouches記錄著觸發(fā)該次事件的信息，一般長度為1
二、自定義手勢事件gesture
手勢事件只是概念型，目前還沒有瀏覽器原生支持，按照概念可分為gesturestart gesturechange gestureend 三種事件
gesturestart：當(dāng)有兩根或多根手指放到屏幕上的時候觸發(fā)
gesturechange：當(dāng)有兩根或多根手指在屏幕上，并且有手指移動的時候觸發(fā)
gestureend：當(dāng)?shù)箶?shù)第二根手指提起的時候觸發(fā)，結(jié)束gesture
按照定義，當(dāng)分別將兩根手指放到屏幕上的時候，會有如下順序的事件觸發(fā)：
1、第一根手指放下，觸發(fā)touchstart
2、第二根手指放下，觸發(fā)gesturestart
3、觸發(fā)第二根手指的touchstart
4、立即觸發(fā)gesturechange
5、手指移動，持續(xù)觸發(fā)gesturechange
6、第二根手指提起，觸發(fā)gestureend，以后將不會再觸發(fā)gesturechange
7、觸發(fā)第二根手指的touchend
8、觸發(fā)touchstart（多根手指在屏幕上，提起一根，會刷新一次全局 touch，重新觸發(fā)第一根手指的touchstart）
9、提起第一根手指，觸發(fā)touchend
拖拽的案例
