一馍驯、 基礎(chǔ)事件
1．click事件
單擊事件，類似于PC端的click玛痊，但在移動端中汰瘫，連續(xù)click的觸發(fā)有200ms ~ 300ms的延遲。
?2007年第一代iphone發(fā)布擂煞，由于那個(gè)年代所有的網(wǎng)頁都是針對大屏的pc端設(shè)計(jì)的混弥，iphone的Safari瀏覽器為了讓用戶瀏覽網(wǎng)頁的時(shí)候可以瀏覽到整個(gè)網(wǎng)頁，把viewport設(shè)置為960px(參考前面的文章)对省，好是好蝗拿，但是由于縮放了整個(gè)頁面，導(dǎo)致內(nèi)容變得非常小官辽，視力6.0的都不一定看得清楚蛹磺。
?所以Safari瀏覽器自帶了一個(gè)當(dāng)時(shí)看起來相當(dāng)酷的一個(gè)功能：雙擊縮放。你雙擊頁面的時(shí)候同仆，瀏覽器會智能的縮放當(dāng)前頁面到原始大小萤捆。
?雙擊縮放的原理就是，當(dāng)你click一次之后俗批，會經(jīng)過300ms之后檢測是否再有一次click俗或，如果有的話，就會縮放頁面岁忘。否則的話就是一個(gè)click事件辛慰。
?所以，當(dāng)你想執(zhí)行click操作的時(shí)候干像，就感覺到了”卡頓”帅腌。如果點(diǎn)擊之后100ms之后沒有反應(yīng)驰弄，基本就有卡頓的感覺。
dblclick事件失效速客。
由于雙擊縮放的存在戚篙，pc端的dblclick事件也失效了。
2．touch類事件
1) 事件基礎(chǔ)
觸摸事件溺职，有touchstart岔擂、 touchmove、 touchend浪耘、 touchcancel 四種之分
touchstart：手指觸摸到屏幕會觸發(fā)
當(dāng)用戶手指觸摸到的觸摸屏的時(shí)候觸發(fā)乱灵。事件對象的 target 就是touch 發(fā)生位置的那個(gè)元素。
touchmove：當(dāng)手指在屏幕上移動時(shí)七冲，會觸發(fā)
當(dāng)用戶在觸摸屏上移動觸點(diǎn)(手指)的時(shí)候痛倚，觸發(fā)這個(gè)事件。一定是先要觸發(fā)touchstart事件癞埠，再有可能觸發(fā) touchmove 事件状原。 touchmove 事件的target 與最先觸發(fā)的 touchstart 的 target 保持一致。touchmove事件和鼠標(biāo)的mousemove事件一樣都會多次重復(fù)調(diào)用苗踪，所以，事件處理時(shí)不能有太多耗時(shí)操作削锰。不同的設(shè)備通铲，移動同樣的距離 touchmove 事件的觸發(fā)頻率是不同的。 有一點(diǎn)需要注意：即使手指移出了 原來的target 元素器贩，則 touchmove 仍然會被一直觸發(fā)颅夺，而且 target 仍然是原來的 target 元素。
touchend：當(dāng)手指離開屏幕時(shí)蛹稍，會觸發(fā)吧黄。
當(dāng)用戶的手指抬起的時(shí)候，會觸發(fā) touchend 事件唆姐。如果用戶的手指從觸屏設(shè)備的邊緣移出了觸屏設(shè)備拗慨，也會觸發(fā) touchend 事件。touchend 事件的 target 也是與 touchstart 的 target 一致奉芦，即使已經(jīng)移出了元素赵抢。
touchcancel：可由系統(tǒng)進(jìn)行的觸發(fā)（如電話接入或者彈出信息），比如手指觸摸屏幕的時(shí)候声功，突然電話來了，或者系統(tǒng)中其他打斷了touch的行為，則可以觸發(fā)該事件播玖。
2) touch與click
當(dāng)一個(gè)用戶在點(diǎn)擊屏幕的時(shí)候，系統(tǒng)會觸發(fā)touch事件和click事件冒冬，touch事件優(yōu)先處理，touch事件經(jīng)過 捕獲摩渺，處理, 冒泡 一系列流程處理完成后简烤， 才回去觸發(fā)click事件。
既然touch事件和click事件有了優(yōu)先級別证逻，那么能不能在touch階段取消掉系統(tǒng)觸發(fā)的click事件呢乐埠？當(dāng)然是可以的，瀏覽器提供了這樣的能力囚企。在touch事件里面丈咐，調(diào)用e.preventDefault() 就可以阻止本次點(diǎn)擊系統(tǒng)觸發(fā)的click事件，即本次相關(guān)的click都不會執(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從文檔樹上面消失了次慢，而且由于移動端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．事件對象
TouchEvent 是一類描述手指在觸摸平面（觸摸屏闻妓、觸摸板等）的狀態(tài)變化的事件。這類事件用于描述一個(gè)或多個(gè)觸點(diǎn)掠械，使開發(fā)者可以檢測觸點(diǎn)的移動由缆，觸點(diǎn)的增加和減少，等等份蝴。
每 個(gè) Touch對象代表一個(gè)觸點(diǎn); 每個(gè)觸點(diǎn)都由其位置犁功，大小，形狀婚夫，壓力大小浸卦，和目標(biāo) element描述。 TouchList 對象代表多個(gè)觸點(diǎn)的一個(gè)列表.
1) TouchEvent
TouchEvent的屬性繼承了 UIEvent和 Event案糙。
三個(gè)重要屬性：
TouchEvent.changedTouches： 一個(gè) TouchList 對象限嫌，包含了代表所有從上一次觸摸事件到此次事件過程中靴庆，狀態(tài)發(fā)生了改變的觸點(diǎn)的 Touch 對象。
TouchEvent.targetTouches： 一個(gè) TouchList 對象怒医，是包含了如下觸點(diǎn)的 Touch 對象：觸摸起始于當(dāng)前事件的目標(biāo) element 上炉抒，并且仍然沒有離開觸摸平面的觸點(diǎn)。
TouchEvent.touches： 一 個(gè) TouchList 對象稚叹，包含了所有當(dāng)前接觸觸摸平面的觸點(diǎn)的 Touch 對象焰薄，無論它們的起始于哪個(gè) element 上，也無論它們狀態(tài)是否發(fā)生了變化扒袖。
2) TouchList詳解
只讀屬性：length返回這個(gè)TouchList中Touch對的個(gè)數(shù)塞茅。(就是有幾個(gè)手指接觸到了屏幕)
方法：item(index)返回TouchList中指定索引的Touch對象
3) Touch詳解
1．click事件
單擊事件，類似于PC端的click季率，但在移動端中野瘦，連續(xù)click的觸發(fā)有200ms ~ 300ms的延遲。
?2007年第一代iphone發(fā)布飒泻，由于那個(gè)年代所有的網(wǎng)頁都是針對大屏的pc端設(shè)計(jì)的鞭光，iphone的Safari瀏覽器為了讓用戶瀏覽網(wǎng)頁的時(shí)候可以瀏覽到整個(gè)網(wǎng)頁，把viewport設(shè)置為960px(參考前面的文章)泞遗，好是好惰许，但是由于縮放了整個(gè)頁面，導(dǎo)致內(nèi)容變得非常小史辙，視力6.0的都不一定看得清楚啡省。
?所以Safari瀏覽器自帶了一個(gè)當(dāng)時(shí)看起來相當(dāng)酷的一個(gè)功能：雙擊縮放。你雙擊頁面的時(shí)候髓霞，瀏覽器會智能的縮放當(dāng)前頁面到原始大小。
?雙擊縮放的原理就是畦戒，當(dāng)你click一次之后方库，會經(jīng)過300ms之后檢測是否再有一次click，如果有的話障斋，就會縮放頁面纵潦。否則的話就是一個(gè)click事件。
?所以垃环，當(dāng)你想執(zhí)行click操作的時(shí)候邀层，就感覺到了”卡頓”。如果點(diǎn)擊之后100ms之后沒有反應(yīng)遂庄，基本就有卡頓的感覺寥院。
dblclick事件失效。
由于雙擊縮放的存在涛目，pc端的dblclick事件也失效了秸谢。
2．touch類事件
1) 事件基礎(chǔ)
觸摸事件凛澎，有touchstart touchmove touchend touchcancel 四種之分
touchstart：手指觸摸到屏幕會觸發(fā)
當(dāng)用戶手指觸摸到的觸摸屏的時(shí)候觸發(fā)。事件對象的 target 就是touch 發(fā)生位置的那個(gè)元素估蹄。
touchmove：當(dāng)手指在屏幕上移動時(shí)塑煎，會觸發(fā)
當(dāng)用戶在觸摸屏上移動觸點(diǎn)(手指)的時(shí)候，觸發(fā)這個(gè)事件臭蚁。一定是先要觸發(fā)touchstart事件最铁，再有可能觸發(fā) touchmove 事件。 touchmove 事件的target 與最先觸發(fā)的 touchstart 的 target 保持一致垮兑。touchmove事件和鼠標(biāo)的mousemove事件一樣都會多次重復(fù)調(diào)用冷尉，所以，事件處理時(shí)不能有太多耗時(shí)操作甥角。不同的設(shè)備网严，移動同樣的距離 touchmove 事件的觸發(fā)頻率是不同的。 有一點(diǎn)需要注意：即使手指移出了 原來的target 元素嗤无，則 touchmove 仍然會被一直觸發(fā)震束，而且 target 仍然是原來的 target 元素。
touchend：當(dāng)手指離開屏幕時(shí)当犯，會觸發(fā)垢村。
當(dāng)用戶的手指抬起的時(shí)候，會觸發(fā) touchend 事件嚎卫。如果用戶的手指從觸屏設(shè)備的邊緣移出了觸屏設(shè)備嘉栓，也會觸發(fā) touchend 事件。touchend 事件的 target 也是與 touchstart 的 target 一致拓诸，即使已經(jīng)移出了元素侵佃。
touchcancel：可由系統(tǒng)進(jìn)行的觸發(fā)（如電話接入或者彈出信息），比如手指觸摸屏幕的時(shí)候奠支，突然電話來了馋辈，或者系統(tǒng)中其他打斷了touch的行為，則可以觸發(fā)該事件倍谜。
2) touch與click
當(dāng)一個(gè)用戶在點(diǎn)擊屏幕的時(shí)候迈螟，系統(tǒng)會觸發(fā)touch事件和click事件，touch事件優(yōu)先處理尔崔，touch事件經(jīng)過 捕獲答毫，處理, 冒泡 一系列流程處理完成后， 才回去觸發(fā)click事件季春。
既然touch事件和click事件有了優(yōu)先級別洗搂，那么能不能在touch階段取消掉系統(tǒng)觸發(fā)的click事件呢？當(dāng)然是可以的，瀏覽器提供了這樣的能力蚕脏。在touch事件里面侦副，調(diào)用e.preventDefault() 就可以阻止本次點(diǎn)擊系統(tǒng)觸發(fā)的click事件，即本次相關(guān)的click都不會執(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從文檔樹上面消失了厅目，而且由于移動端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．事件對象
TouchEvent 是一類描述手指在觸摸平面（觸摸屏拗馒、觸摸板等）的狀態(tài)變化的事件。這類事件用于描述一個(gè)或多個(gè)觸點(diǎn)溯街，使開發(fā)者可以檢測觸點(diǎn)的移動诱桂，觸點(diǎn)的增加和減少，等等呈昔。
每 個(gè) Touch對象代表一個(gè)觸點(diǎn); 每個(gè)觸點(diǎn)都由其位置挥等，大小，形狀堤尾，壓力大小触菜，和目標(biāo) element描述。 TouchList 對象代表多個(gè)觸點(diǎn)的一個(gè)列表.
1) TouchEvent
TouchEvent的屬性繼承了 UIEvent和 Event哀峻。
三個(gè)重要屬性：
TouchEvent.changedTouches： 一個(gè) TouchList 對象，包含了代表所有從上一次觸摸事件到此次事件過程中哲泊，狀態(tài)發(fā)生了改變的觸點(diǎn)的 Touch 對象剩蟀。
TouchEvent.targetTouches： 一個(gè) TouchList 對象，是包含了如下觸點(diǎn)的 Touch 對象：觸摸起始于當(dāng)前事件的目標(biāo) element 上切威，并且仍然沒有離開觸摸平面的觸點(diǎn)育特。
TouchEvent.touches： 一 個(gè) TouchList 對象，包含了所有當(dāng)前接觸觸摸平面的觸點(diǎn)的 Touch 對象，無論它們的起始于哪個(gè) element 上缰冤，也無論它們狀態(tài)是否發(fā)生了變化犬缨。
2) TouchList詳解
只讀屬性：length返回這個(gè)TouchList中Touch對的個(gè)數(shù)。(就是有幾個(gè)手指接觸到了屏幕)
方法：item(index)返回TouchList中指定索引的Touch對象
3) Touch詳解
觸點(diǎn)相對于屏幕左邊沿的的X坐標(biāo). 只讀屬性.
觸點(diǎn)相對于屏幕上邊沿的的Y坐標(biāo). 只讀屬性.
能夠包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)半徑. 這個(gè)值的單位和 screenX 相同. 只讀屬性.
能夠包圍用戶和觸摸平面的接觸面的最小橢圓的垂直軸(Y軸)半徑. 這個(gè)值的單位和 screenY 相同. 只讀屬性.
它是這樣一個(gè)角度值：由radiusX 和radiusY 描述的正方向的橢圓棉浸，需要通過順時(shí)針旋轉(zhuǎn)這個(gè)角度值怀薛，才能最精確地覆蓋住用戶和觸摸平面的接觸面. 只讀屬性.
手指擠壓觸摸平面的壓力大小, 從0.0(沒有壓力)到1.0(最大壓力)的浮點(diǎn)數(shù). 只讀屬性.
4．tap類事件
觸碰事件，一般用于代替click事件迷郑，有tap longTap singleTap doubleTap四種之分
tap: 手指碰一下屏幕會觸發(fā)
longTap: 手指長按屏幕會觸發(fā)
singleTap: 手指碰一下屏幕會觸發(fā)
doubleTap: 手指雙擊屏幕會觸發(fā)
注意:在很多情況下枝恋，觸摸事件和鼠標(biāo)事件會同時(shí)被觸發(fā)（目的是讓沒有對觸摸設(shè)備優(yōu)化的代碼仍然可以在觸摸設(shè)備上正常工作）。如果你使用了觸摸事件嗡害，可以調(diào)用 event.preventDefault()來阻止鼠標(biāo)事件被觸發(fā)焚碌。
一個(gè)正確的 tap 事件應(yīng)當(dāng)滿足一下條件：
用戶手指從屏幕移開時(shí)觸發(fā)
不能在用戶移動手指時(shí)觸發(fā)（防止和滾動、拖拽事件的沖突）
多個(gè)手指同時(shí)觸摸屏幕時(shí)不能觸發(fā)
不應(yīng)該觸發(fā) click 事件
5．swipe類事件
滑動事件霸妹，有swipe swipeLeft swipeRight swipeUp swipeDown 五種之分
swipe：手指在屏幕上滑動時(shí)會觸發(fā)
swipeLeft：手指在屏幕上向左滑動時(shí)會觸發(fā)
swipeRight：手指在屏幕上向右滑動時(shí)會觸發(fā)
swipeUp：手指在屏幕上向上滑動時(shí)會觸發(fā)
swipeDown：手指在屏幕上向下滑動時(shí)會觸發(fā)
二十电、 Zepto.js
Zepto.js 是一個(gè)輕量級的針對現(xiàn)代高級瀏覽器的JavaScript庫， 它適配了jQuery的大部分api叹螟，也就是jQuery怎么用鹃骂，Zepto.js就怎么用。它非常小首妖，非常適合移動端偎漫。
Zepto.js的touch模塊中封裝了手勢相關(guān)的代碼。封裝了再觸摸設(shè)備上觸發(fā)tap– 和 swipe– 相關(guān)事件有缆，也適用于所有的touch(iOS, Android)和pointer事件(Windows Phone)象踊。
觸屏事件：tap、singleTap棚壁、doubleTap杯矩、longTap(>750ms）
滑動事件：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>
三曼验、 其他移動端js庫
1．百度云touch.js
<u>https://github.com/Clouda-team/touchjs</u>
2．hammer.js
<u>https://github.com/hammerjs/hammer.js</u>
3．jquery mobile
<u>http://jquerymobile.com</u>
觸點(diǎn)相對于屏幕左邊沿的的X坐標(biāo). 只讀屬性.
觸點(diǎn)相對于屏幕上邊沿的的Y坐標(biāo). 只讀屬性.
能夠包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)半徑. 這個(gè)值的單位和 screenX 相同. 只讀屬性.
能夠包圍用戶和觸摸平面的接觸面的最小橢圓的垂直軸(Y軸)半徑. 這個(gè)值的單位和 screenY 相同. 只讀屬性.
它是這樣一個(gè)角度值：由radiusX 和radiusY 描述的正方向的橢圓泌射，需要通過順時(shí)針旋轉(zhuǎn)這個(gè)角度值，才能最精確地覆蓋住用戶和觸摸平面的接觸面. 只讀屬性.
手指擠壓觸摸平面的壓力大小, 從0.0(沒有壓力)到1.0(最大壓力)的浮點(diǎn)數(shù). 只讀屬性.
4．tap類事件
觸碰事件鬓照，一般用于代替click事件熔酷，有tap longTap singleTap doubleTap四種之分
tap: 手指碰一下屏幕會觸發(fā)
longTap: 手指長按屏幕會觸發(fā)
singleTap: 手指碰一下屏幕會觸發(fā)
doubleTap: 手指雙擊屏幕會觸發(fā)
注意:在很多情況下，觸摸事件和鼠標(biāo)事件會同時(shí)被觸發(fā)（目的是讓沒有對觸摸設(shè)備優(yōu)化的代碼仍然可以在觸摸設(shè)備上正常工作）豺裆。如果你使用了觸摸事件拒秘，可以調(diào)用 event.preventDefault()來阻止鼠標(biāo)事件被觸發(fā)。
一個(gè)正確的 tap 事件應(yīng)當(dāng)滿足一下條件：
用戶手指從屏幕移開時(shí)觸發(fā)
不能在用戶移動手指時(shí)觸發(fā)（防止和滾動、拖拽事件的沖突）
多個(gè)手指同時(shí)觸摸屏幕時(shí)不能觸發(fā)
不應(yīng)該觸發(fā) click 事件
補(bǔ)充：
- taphold事件版本添加：1.0
描述：持續(xù)完成觸摸事件后觸發(fā)躺酒。
jQuery（“押蚤。selector”）。on（“taphold”羹应，function（event）{...}）
jQuery Mobile taphold事件在持續(xù)揽碘，完整的觸摸事件（也稱為長按）之后觸發(fā)。
$.event.special.tap.tapholdThreshold （默認(rèn)值：750） - 此值指示用戶在目標(biāo)元素上觸發(fā)taphold事件之前必須持有多長時(shí)間量愧。
$.event.special.tap.emitTapOnTaphold （默認(rèn)值：true） - 此值指示是否將與taphold事件一起發(fā)出點(diǎn)擊事件钾菊。
這個(gè)插件擴(kuò)展了jQuery的內(nèi)置方法。如果未加載jQuery Mobile偎肃，則調(diào)用該.taphold()方法可能不會直接失敗煞烫，因?yàn)樵摲椒ㄈ匀淮嬖凇５抢鬯蹋粫l(fā)生預(yù)期的行為滞详。
5．swipe類事件
滑動事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五種之分
swipe：手指在屏幕上滑動時(shí)會觸發(fā)
swipeLeft：手指在屏幕上向左滑動時(shí)會觸發(fā)
swipeRight：手指在屏幕上向右滑動時(shí)會觸發(fā)
swipeUp：手指在屏幕上向上滑動時(shí)會觸發(fā)
swipeDown：手指在屏幕上向下滑動時(shí)會觸發(fā)
二紊馏、 Zepto.js
Zepto.js 是一個(gè)輕量級的針對現(xiàn)代高級瀏覽器的JavaScript庫料饥， 它適配了jQuery的大部分api，也就是jQuery怎么用朱监，Zepto.js就怎么用岸啡。它非常小，非常適合移動端赫编。
Zepto.js的touch模塊中封裝了手勢相關(guān)的代碼巡蘸。封裝了再觸摸設(shè)備上觸發(fā)tap– 和 swipe– 相關(guān)事件，也適用于所有的touch(iOS, Android)和pointer事件(Windows Phone)擂送。
觸屏事件：tap悦荒、singleTap、doubleTap嘹吨、longTap(>750ms）
滑動事件：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>
三、 其他移動端js庫
1．百度云touch.js
<u>https://github.com/Clouda-team/touchjs</u>
2．hammer.js
<u>https://github.com/hammerjs/hammer.js</u>
