移動端Click300毫秒點擊延遲

zeptol 庫 的 tap事件 能夠解決

1. 300ms延遲的產生原因

移動端瀏覽器的默認顯示寬度是980px(不一樣機型各異，但相差不大)，而不是屏幕的寬度(320px或其餘)。爲了對早期普通網頁更好的體驗，iphone設計了雙擊放大顯示的功能--這就是300ms延遲的來源：若是用戶一次點擊後300ms內沒有其餘操做，則認爲是個單擊行爲；不然爲雙擊放大行爲。

2. 點透行爲

假設有兩個層級，A和B；A在上面，B在下面。 若是A監聽touch事件(zepto的tap事件)，並且B上有個連接(或者監聽click事件)，那麼當touch A後，前後觸發了touchStart和touchEnd事件，touchEnd後A層隱藏，而此刻會觸發在document最前面B的click事件；這就是點透行爲。

3. 解決方法

1. 設置不能縮放：user-scalable=no。 不能縮放就不會有雙擊縮放操做，所以click事件也就沒了300ms延遲，這個是Chrome首先在Android中提出的。
2. 設置顯示寬度：width=device-width。Chrome 開發團隊不久前宣佈，在 Chrome 32 這一版中，他們將在包含 width=device-width 或者置爲比 viewport 值更小的頁面上禁用雙擊縮放。固然，沒有雙擊縮放就沒有 300 毫秒點擊延遲。
3. IE的指針事件 (Pointer Events)：設置touch-action:none，根據規範，touch-action 屬性決定
   「是否觸摸操做會觸發用戶代理的默認行爲。這包括但不限於雙指縮放等行爲」
   。
   從實際應用的角度來看，touch-action決定了用戶在點擊了目標元素以後，是否可以進行雙指縮放或者雙擊縮放。所以，這也至關完美地解決了 300 毫秒點擊延遲的問題。

鑑於上述的3種解決方案，如今較爲通用的meta設置爲：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
複製代碼

4. 如今的流行解決方案：

上述的3種解決方案能夠解決Chrome Android和IE10+下的300ms問題，可是對其餘瀏覽器還須要特定的解決方案。

1. 指針事件的 polyfill
   指針事件的 polyfill 比較多，如下列出比較流行的幾個。Google 的 Polymer，微軟的 HandJS和@Rich-Harris 的 Points
2. FastClick
   FastClick 是 FT Labs 專門爲解決移動端瀏覽器 300 毫秒點擊延遲問題所開發的一個輕量級的庫。簡而言之，FastClick 在檢測到 touchend事件的時候，會經過 DOM 自定義事件當即觸發一個模擬click事件，並把瀏覽器在 300 毫秒以後真正觸發的 click事件阻止掉。

5. FastClick

現階段FastClick被更多使用，藉助它經過監聽click事件，便可消除300ms的問題。
經過閱讀源碼可知：

1. FastClick經過判斷瀏覽器類型決定其是否是須要執行，下面幾種場景下不會執行FastClick邏輯：

• 不支持ontouchstart事件的瀏覽器
• Android Chrome 或者 firefox27以上 設置了user-scalable="no"
• 知足特定要求的 IE10+ 瀏覽器
• 部分黑莓瀏覽器

1. 註冊了touchStart、touchEnd等事件，監聽touchStart決定事件對象的target、時間、位置等信息；經過touchEnd獲得touch的結束時間。若是touch時長大於700ms，則是長按事件；若是連續兩次touchEnd的時間間隔小於200ms，那麼認定爲快速點擊，特殊對待；排除上面兩張狀況，就經過clickEvent = document.createEvent('MouseEvents'); initMouseEvent; dispatchEvent手動觸發click事件。