一、 基礎(chǔ)事件
1．click事件
單擊事件泽示，類似于PC端的click，但在移動(dòng)端中，連續(xù)click的觸發(fā)有200ms ~ 300ms的延遲蛉迹。
?2007年第一代iphone發(fā)布，由于那個(gè)年代所有的網(wǎng)頁(yè)都是針對(duì)大屏的pc端設(shè)計(jì)的放妈，iphone的Safari瀏覽器為了讓用戶瀏覽網(wǎng)頁(yè)的時(shí)候可以瀏覽到整個(gè)網(wǎng)頁(yè)北救，把viewport設(shè)置為960px(參考前面的文章)，好是好芜抒，但是由于縮放了整個(gè)頁(yè)面珍策，導(dǎo)致內(nèi)容變得非常小，視力6.0的都不一定看得清楚挽绩。
?所以Safari瀏覽器自帶了一個(gè)當(dāng)時(shí)看起來(lái)相當(dāng)酷的一個(gè)功能：雙擊縮放膛壹。你雙擊頁(yè)面的時(shí)候，瀏覽器會(huì)智能的縮放當(dāng)前頁(yè)面到原始大小唉堪。
?雙擊縮放的原理就是，當(dāng)你click一次之后肩民，會(huì)經(jīng)過(guò)300ms之后檢測(cè)是否再有一次click唠亚，如果有的話，就會(huì)縮放頁(yè)面持痰。否則的話就是一個(gè)click事件灶搜。
?所以，當(dāng)你想執(zhí)行click操作的時(shí)候工窍，就感覺(jué)到了”卡頓”割卖。如果點(diǎn)擊之后100ms之后沒(méi)有反應(yīng)，基本就有卡頓的感覺(jué)患雏。
dblclick事件失效鹏溯。
由于雙擊縮放的存在，pc端的dblclick事件也失效了淹仑。
2．touch類事件
1) 事件基礎(chǔ)
觸摸事件丙挽，有touchstart touchmove touchend touchcancel 四種之分
touchstart：手指觸摸到屏幕會(huì)觸發(fā)
當(dāng)用戶手指觸摸到的觸摸屏的時(shí)候觸發(fā)肺孵。事件對(duì)象的 target 就是touch 發(fā)生位置的那個(gè)元素。
touchmove：當(dāng)手指在屏幕上移動(dòng)時(shí)颜阐，會(huì)觸發(fā)
當(dāng)用戶在觸摸屏上移動(dòng)觸點(diǎn)(手指)的時(shí)候平窘，觸發(fā)這個(gè)事件。一定是先要觸發(fā)touchstart事件凳怨，再有可能觸發(fā) touchmove 事件瑰艘。 touchmove 事件的target 與最先觸發(fā)的 touchstart 的 target 保持一致。touchmove事件和鼠標(biāo)的mousemove事件一樣都會(huì)多次重復(fù)調(diào)用肤舞，所以磅叛，事件處理時(shí)不能有太多耗時(shí)操作。不同的設(shè)備萨赁，移動(dòng)同樣的距離 touchmove 事件的觸發(fā)頻率是不同的弊琴。 有一點(diǎn)需要注意：即使手指移出了 原來(lái)的target 元素，則 touchmove 仍然會(huì)被一直觸發(fā)杖爽，而且 target 仍然是原來(lái)的 target 元素敲董。
touchend：當(dāng)手指離開(kāi)屏幕時(shí)，會(huì)觸發(fā)慰安。
當(dāng)用戶的手指抬起的時(shí)候腋寨，會(huì)觸發(fā) touchend 事件。如果用戶的手指從觸屏設(shè)備的邊緣移出了觸屏設(shè)備化焕，也會(huì)觸發(fā) touchend 事件萄窜。touchend 事件的 target 也是與 touchstart 的 target 一致，即使已經(jīng)移出了元素撒桨。
touchcancel：可由系統(tǒng)進(jìn)行的觸發(fā)（如電話接入或者彈出信息）查刻，比如手指觸摸屏幕的時(shí)候，突然電話來(lái)了凤类，或者系統(tǒng)中其他打斷了touch的行為穗泵，則可以觸發(fā)該事件。
2) touch與click
當(dāng)一個(gè)用戶在點(diǎn)擊屏幕的時(shí)候谜疤，系統(tǒng)會(huì)觸發(fā)touch事件和click事件佃延，touch事件優(yōu)先處理，touch事件經(jīng)過(guò) 捕獲夷磕，處理, 冒泡 一系列流程處理完成后履肃， 才回去觸發(fā)click事件。
既然touch事件和click事件有了優(yōu)先級(jí)別坐桩，那么能不能在touch階段取消掉系統(tǒng)觸發(fā)的click事件呢尺棋？當(dāng)然是可以的，瀏覽器提供了這樣的能力撕攒。在touch事件里面陡鹃，調(diào)用e.preventDefault() 就可以阻止本次點(diǎn)擊系統(tǒng)觸發(fā)的click事件烘浦，即本次相關(guān)的click都不會(huì)執(zhí)行。
targrt.addEventListener('touchstart', function(e) {
console.log(1);
e.preventDefault();
});
3) 點(diǎn)透現(xiàn)象
點(diǎn)透發(fā)生的條件：
A 和 B不是后代繼承關(guān)系(如果是后代繼承關(guān)系的話萍鲸，就直接是冒泡子類的話題了)
A發(fā)生touch闷叉， A touch后立即消失， B事件綁定click
A z-index大于B脊阴，即A顯示在B浮層之上
點(diǎn)透發(fā)生的理由:
當(dāng)手指觸摸到屏幕的時(shí)候握侧，系統(tǒng)生成兩個(gè)事件，一個(gè)是touch 一個(gè)是click嘿期，touch先執(zhí)行品擎，touch執(zhí)行完成后，A從文檔樹(shù)上面消失了备徐，而且由于移動(dòng)端click還有延遲200-300ms的關(guān)系萄传，當(dāng)系統(tǒng)要觸發(fā)click的時(shí)候，發(fā)現(xiàn)在用戶點(diǎn)擊的位置上面蜜猾，目前離用戶最近的元素是B秀菱，所以就直接把click事件作用在B元素上面了。
解決辦法：
targrt.addEventListener('touchend', function(e) {
e.preventDefault();
});
3．事件對(duì)象
TouchEvent 是一類描述手指在觸摸平面（觸摸屏蹭睡、觸摸板等）的狀態(tài)變化的事件衍菱。這類事件用于描述一個(gè)或多個(gè)觸點(diǎn)，使開(kāi)發(fā)者可以檢測(cè)觸點(diǎn)的移動(dòng)肩豁，觸點(diǎn)的增加和減少脊串，等等。
每 個(gè) Touch對(duì)象代表一個(gè)觸點(diǎn); 每個(gè)觸點(diǎn)都由其位置清钥，大小琼锋，形狀，壓力大小循捺，和目標(biāo) element描述斩例。 TouchList 對(duì)象代表多個(gè)觸點(diǎn)的一個(gè)列表.
1) TouchEvent
TouchEvent的屬性繼承了 UIEvent和 Event。
三個(gè)重要屬性：
TouchEvent.changedTouches： 一個(gè) TouchList 對(duì)象从橘，包含了代表所有從上一次觸摸事件到此次事件過(guò)程中，狀態(tài)發(fā)生了改變的觸點(diǎn)的 Touch 對(duì)象础钠。
TouchEvent.targetTouches： 一個(gè) TouchList 對(duì)象恰力，是包含了如下觸點(diǎn)的 Touch 對(duì)象：觸摸起始于當(dāng)前事件的目標(biāo) element 上，并且仍然沒(méi)有離開(kāi)觸摸平面的觸點(diǎn)旗吁。
TouchEvent.touches： 一 個(gè) TouchList 對(duì)象踩萎，包含了所有當(dāng)前接觸觸摸平面的觸點(diǎn)的 Touch 對(duì)象，無(wú)論它們的起始于哪個(gè) element 上很钓，也無(wú)論它們狀態(tài)是否發(fā)生了變化香府。
4) TouchList詳解
只讀屬性：length返回這個(gè)TouchList中Touch對(duì)的個(gè)數(shù)董栽。(就是有幾個(gè)手指接觸到了屏幕)
方法：item(index)返回TouchList中指定索引的Touch對(duì)象
5) Touch詳解
觸點(diǎn)相對(duì)于屏幕左邊沿的的X坐標(biāo). 只讀屬性.
觸點(diǎn)相對(duì)于屏幕上邊沿的的Y坐標(biāo). 只讀屬性.
能夠包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)半徑. 這個(gè)值的單位和 screenX 相同. 只讀屬性.
能夠包圍用戶和觸摸平面的接觸面的最小橢圓的垂直軸(Y軸)半徑. 這個(gè)值的單位和 screenY 相同. 只讀屬性.
它是這樣一個(gè)角度值：由radiusX 和radiusY 描述的正方向的橢圓，需要通過(guò)順時(shí)針旋轉(zhuǎn)這個(gè)角度值企孩，才能最精確地覆蓋住用戶和觸摸平面的接觸面. 只讀屬性.
手指擠壓觸摸平面的壓力大小, 從0.0(沒(méi)有壓力)到1.0(最大壓力)的浮點(diǎn)數(shù). 只讀屬性.
4．tap類事件
觸碰事件锭碳，一般用于代替click事件，有tap longTap singleTap doubleTap四種之分
tap: 手指碰一下屏幕會(huì)觸發(fā)
longTap: 手指長(zhǎng)按屏幕會(huì)觸發(fā)
singleTap: 手指碰一下屏幕會(huì)觸發(fā)
doubleTap: 手指雙擊屏幕會(huì)觸發(fā)
注意:在很多情況下勿璃，觸摸事件和鼠標(biāo)事件會(huì)同時(shí)被觸發(fā)（目的是讓沒(méi)有對(duì)觸摸設(shè)備優(yōu)化的代碼仍然可以在觸摸設(shè)備上正常工作）擒抛。如果你使用了觸摸事件，可以調(diào)用 event.preventDefault()來(lái)阻止鼠標(biāo)事件被觸發(fā)补疑。
一個(gè)正確的 tap 事件應(yīng)當(dāng)滿足一下條件：
用戶手指從屏幕移開(kāi)時(shí)觸發(fā)
不能在用戶移動(dòng)手指時(shí)觸發(fā)（防止和滾動(dòng)歧沪、拖拽事件的沖突）
多個(gè)手指同時(shí)觸摸屏幕時(shí)不能觸發(fā)
不應(yīng)該觸發(fā) click 事件
5．swipe類事件
滑動(dòng)事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五種之分
swipe：手指在屏幕上滑動(dòng)時(shí)會(huì)觸發(fā)
swipeLeft：手指在屏幕上向左滑動(dòng)時(shí)會(huì)觸發(fā)
swipeRight：手指在屏幕上向右滑動(dòng)時(shí)會(huì)觸發(fā)
swipeUp：手指在屏幕上向上滑動(dòng)時(shí)會(huì)觸發(fā)
swipeDown：手指在屏幕上向下滑動(dòng)時(shí)會(huì)觸發(fā)
二莲组、 Zepto.js
Zepto.js 是一個(gè)輕量級(jí)的針對(duì)現(xiàn)代高級(jí)瀏覽器的JavaScript庫(kù)诊胞， 它適配了jQuery的大部分api，也就是jQuery怎么用锹杈，Zepto.js就怎么用撵孤。它非常小，非常適合移動(dòng)端嬉橙。
Zepto.js的touch模塊中封裝了手勢(shì)相關(guān)的代碼早直。封裝了再觸摸設(shè)備上觸發(fā)tap– 和 swipe– 相關(guān)事件，也適用于所有的touch(iOS, Android)和pointer事件(Windows Phone)市框。
觸屏事件：tap霞扬、singleTap、doubleTap枫振、longTap(>750ms）
滑動(dòng)事件：swipe喻圃、swipeLeft,、swipeRight,粪滤、swipeUp,斧拍、swipeDown
<style>.delete { display: none; }</style>
<ul id=items>
<li>List item 1 <span class=delete>DELETE</span></li>
<li>List item 2 <span class=delete>DELETE</span></li>
</ul>
<script>
$('#items li').swipe(function(){
$('.delete').hide()
$('.delete', this).show()
})
$('.delete').tap(function(){
$(this).parent('li').remove()
})
</script>
三、 其他移動(dòng)端js庫(kù)
1．百度云touch.js
https://github.com/Clouda-team/touchjs
6．hammer.js
https://github.com/hammerjs/hammer.js
