[TOC]
# 移動端 click 時間 300ms 延遲
web 開發對鼠標有一套完整的事件支持,但是對移動系統上的點擊,觸控,滑動的事件支持并不完善。就拿最常見的點擊來說,h5 就有過很長一段時間的不好體驗。
在移動端,click點擊事件會造成300ms的延遲,造成這種延遲的原因在于:當用戶一次點擊屏幕之后,瀏覽器并不能立刻判斷用戶是要進行雙擊縮放,還是想要進行單擊操作。因此,瀏覽器就等待 300 毫秒,以判斷用戶是否再次點擊了屏幕。
點擊延遲,對于早期的h5開發可以說是致命的,相較于native的流暢來說,h5的300毫秒的點擊延遲幾乎是不可接受的。
業界常用的方法是采用將touch事件來進行一系列封裝,進而得出一套觸控Api來。對于這種體驗不佳的問題,我們可以使用tap等事件來替代,而tap事件屬于模擬類事件,需要引入zepto.js或者百度的touch.js等插件輔助實現
fastclick.js 就是經過大量優化的去除點擊延遲解決方案。原理是hook了瀏覽器的touch事件來模擬click事件,讓前端開發人員以熟悉的click來書寫代碼
除了點擊事件,滾動、滑動、多點觸控,這些瀏覽器不原生提供的能力都需要我們用代碼去模擬出來。

采用較常規的解決方案 fastclick 來去除點擊延遲,在以后的項目中如果遇到更復雜的交互需求,會采用更具擴展性的hammerjs來處理各種各樣的觸碰需求。比如滑動、旋轉、多點觸碰。
## 參考:
[現在最好的觸屏事件庫是哪個?](https://www.zhihu.com/question/27316588)
[移動端300ms點擊延遲和點擊穿透問題](http://www.jianshu.com/p/6e2b68a93c88)
[也來說說touch事件與點擊穿透問題](https://segmentfault.com/a/1190000003848737)
- 前言
- 中文字體
- 移動Web適配方案
- !移動Web基礎!
- 詳解適配相關概念
- 移動開發之設計稿
- 移動適配方案(一)
- 移動適配方案(二)
- vw+rem 實現移動端布局
- 移動端適配之雪碧圖(sprite)背景圖片定位
- 適配 iPhoneX
- 前端開發實戰
- 打造自己的前端開發流程(Gulp)
- flexible.js案例講解
- viewport 與 flexible.js解讀
- 圖片與字體
- 踩過的坑
- 瀏覽器默認樣式
- 300ms點擊延遲和點擊穿透
- ios css
- CSS 常見問題
- Ionic v1混合開發
- Native App、Web App 、Hybrid App?
- ionic項目結構
- 混淆加密
- 解決問題
- cordova
- 環境配置
- 打包發布
- 問題
- 移動前端開發優化
- Web開發之抓包
- ===web移動開發資源===
- H5組件框架
- 調試集合
- 簡單h5調試
- whistle
- devtools-pro