5步解決行動裝置上的300ms點擊延遲

標籤：

譯者：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

5步解決行動裝置上的300ms點擊延遲