5步解決移動裝置上的300ms點選延遲
大多數基於觸控的瀏覽器裝置，在點選時都會有個 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的一部分，因此也許我們並不需要等待太久。