突然發現一個問題，如果用touchstart替換了click 問題大了！？

touchstart雖然替換click 或者用touchend替換click 雖然會減掉300ms的延遲

但是如果用戶只是想滾動下拉框的時候會誤點 一樣觸發了touchstart 和touchend 進入鏈接 這樣太糟糕了但是如果用click就不會 用戶滑動的時候不會誤點不會觸發

---

所以一般封裝的所謂 tap 事件，都是 touchstart、touchmove、touchend 相結合，做出精細的判斷，不是隨便用一個事件就能輕鬆代替 click。

---

請查閱我們團隊博客的文章：《移動端點擊、觸碰隨記》作者：鄭淳 來自大搜車前端團隊博客

---

Boring 已經回答了原理了，我補充一下。

具體解決方案，你去搜一下tap事件的實現方式就知道，要麼自己封裝一個tap事件或者用移動框架。當然了更簡單的方案就是引入fastclick，方便簡單。

---

為什麼不搞一個基礎庫，把touchstart click等這些事件封裝起來，允許前端可以混用呢？～

---

這種情況在fastclick的touchend中做了特殊的處理：

if (deviceIsIOS !deviceIsIOS4) {

scrollParent = targetElement.fastClickScrollParent;

if (scrollParent scrollParent.fastClickLastScrollTop !== scrollParent.scrollTop) {

return true;

}

}

如果是滾動的情況下，那麼第二次點擊是不會觸發click事件的！所以還是建議使用click事件來處理，而不是用touch事件

---

監聽touchend事件，如果中間觸發touchmove事件並且位移超過一定值，視為有移動，不再觸發自定義click事件

---

手機瀏覽器這是典型的點擊穿透特性。

我最近的一個項目也遇到了類似的問題，當時也百思不得其解，最後在翻閱一些資料後了解到原來手機瀏覽器里的touch和click事件有這麼坑爹的特性...這個300秒的延遲好像是全局性質的...

最快的解決方案是在綁定touch事件是使用

event.preventDefault

---

推薦閱讀：