譯者：jmouse
大多數基於觸摸的瀏覽器設備，在點擊時都會有個 300ms 的事件觸發等待時間，做過 web app 開發的同學應該都遇到過這個情況，通過下面的5步可以輕松搞定這個延遲。
1、不要太糾結於此
是否能接受這 300ms 的時間延遲，往往取決於你的應用和目標受眾，比如：如果是個內容為主，並且菜單較少的應用，那么用戶在閱讀上花費的事件遠遠大於在菜單上消耗的事件，這種 情況下 300ms 是完全可以接受的，並且沒有 300ms 延遲的體驗並不會好很多。分析你的應用判斷是否需要解決這個不是問題的問題，在做正確抉擇。
2、禁用縮放 （chrome 和 firefox）
在 chrome 和 firefox 的移動版本中，如果禁用了頁面縮放，那么着 300ms 的延遲就會自動消失，具體代碼如下：
<meta name="viewport" content="width=device-width, user-scalable=no">或
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">但是這一方案在 safari 上並不起作用，還會降低有視覺或運動障礙用戶的可訪問性。
3、設置 viewport 的 device-width （chrome 32+）
在 chrome 32+ 中，如果設置了 viewport 的寬度小於或等於物理設備的寬度，那么也會達到禁用縮放的效果。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3">注意：這里的最大縮放比與上面meta中的值並不一致，這個是關鍵點。
4、使用指針事件 （IE10+）
微軟已經針對觸摸問題發布了具體的規范，例如：在你滾屏的時候 pointerup 事件並不會被觸發。
這兒有一個非標准的 CSS 觸摸 action 屬性，它允許你移除特定元素或整個文檔的觸發延遲，而無需禁用縮放：
a, button, .myelements { -ms-touch-action: manipulation; /* IE10 */ touch-action: manipulation; /* IE11+ */ }5、使用 touchend 事件處理
不同於 click 和 touchstart,touchend 沒有這個 300ms 的延遲,而是即時觸發,你完全可以在 WebGL 或 canvase 游戲中進行實踐,但是在web 頁面中單單使用 touchend 並不一定靠譜.
1、如果用戶在兩個不同元素之間觸發了 touchstart 和touchend，那么 click 不會被觸發 .
2、如果用戶觸發了 touchstart,但是在touchend之前是一個長長的 touchmove 滾動, 那么 click 也不會被觸發.
3、在站點上任然應該保留 click 事件以兼容那些非觸摸設備,這是你就要考慮事件的重復觸發問題.
在此處輸入內容已有同行為我們封裝了部分解決方法：
1、FastClick 來至於FT實驗室的一個插件，僅僅只有10kb，但是能解決上面的2-4步.
2、Tappy 來自於Filament Group，僅僅1kb，概念上類似於上面的指針事件.
問題：當你為多個元素進行這些事件綁定時，有可能出現性能的損耗.
是否有完美的解決方案呢？
是否需要解決 300ms 在於自己的判斷，300ms被設計出來是有特定的用途，上面的meta屬性中進行了設定，在chrome和firefox下能起作用，希望其他廠商也能盡 快提供這類支持。touch-action: manipulation 這個css屬性能把風險降到最低，雖然現在只有微軟支持，但是作為W3C規范和HTML5test的一部分，因此也許我們並不需要等待太久。
轉自：http://www.jmouse.cn/?p=524