Touch Events
觸摸事件(touch events)
touchstart: 手指放到屏幕上的時(shí)候觸發(fā)
touchmove: 手指在屏幕上移動(dòng)的時(shí)候觸發(fā)
touchend: 手指從屏幕上拿起的時(shí)候觸發(fā)
touchcancel: 系統(tǒng)取消touch事件的時(shí)候觸發(fā)悔雹。
更多：從 event 中獲取更多信息（touches）
然而 JS 沒有滑動(dòng)事件
手機(jī)上Click延遲300ms
300 毫秒點(diǎn)擊延遲的來龍去脈
早期 iPhone 雙擊縮放
瀏覽 PC 頁(yè)面時(shí)绍些，默認(rèn)縮小展示汛聚；（使用 980 像素的視窗寬度）
用手指在屏幕上快速點(diǎn)擊兩次，iOS Safari 才會(huì)將網(wǎng)頁(yè)縮放至適合比例。
這和 300 毫秒延遲有什么聯(lián)系呢？
用戶在 iOS Safari 里邊點(diǎn)擊了一個(gè)鏈接铁材。
當(dāng)用戶一次點(diǎn)擊屏幕之后
瀏覽器：要打開這個(gè)鏈接？還是想要進(jìn)行雙擊操作奕锌？等 300 ms 再判斷著觉。
用戶沒有再次點(diǎn)擊：打開鏈接；
用戶第二次點(diǎn)擊：雙擊縮放惊暴。
解決方案一
禁止縮放
不讓用戶縮放
給出合適的縮放比例
缺點(diǎn)：無(wú)法縮放
解決方案二
Chrome 32 對(duì)包含width=device-width或者更小的值的頁(yè)面上禁用雙擊縮放饼丘。
沒有雙擊縮放就沒有 300 毫秒點(diǎn)擊延遲。
解決方案三
CSS touch-action屬性
a[href],button{
-ms-touch-action:none;/* IE10 */
touch-action:none;/* IE11 */
}
touch-action的默認(rèn)值為auto辽话，將其置為none即可移除目標(biāo)元素的 300 毫秒延遲肄鸽。
上面的代碼在 IE10 和 IE11 上移除了所有鏈接和按鈕元素的點(diǎn)擊延遲
不對(duì)JS操作有反應(yīng)，只針對(duì)CSS
解決方案四
Fastclick
FastClick在檢測(cè)到touchend事件的時(shí)候油啤，會(huì)通過DOM自定義事件立即觸發(fā)一個(gè)模擬click事件典徘，并把瀏覽器在 300 毫秒之后真正觸發(fā)的click事件阻止掉。
調(diào)用的兩種方式
//純js
if('addEventListener'indocument){
document.addEventListener('DOMContentLoaded',function(){
FastClick.attach(document.body);
},false);
}
//jQuery調(diào)用
$(function(){
FastClick.attach(document.body);
});
思考
為什么 JS 雙擊事件沒有遇到 300ms 的問題益咬？
在雙擊的時(shí)候同時(shí)發(fā)生了兩件事：
1. 放大
2. 雙擊
