有時候我們會發現，用手機瀏覽網站的時候，點擊之后總會有一些小小的延遲，才能觸發我們想要的點擊效果。

原因：瀏覽器要進行一次縮放判斷，如果你是快速的雙擊，就應該去縮放頁面，顧會有300ms延遲來進行該判斷。

具體原因：在很久很久以前，智能手機剛出現的時候，大多數網站還都沒有移動化，但是人們在手機瀏覽器上還是可以訪問到網站的。于是由于手機的屏幕十分小，瀏覽到的頁面會變得十分小。（為了可訪問性，瀏覽器廠商默認把viewpoint視口的寬度設置為了980px，也有部分不太相同的。為的是強行把網站縮放到手機屏幕可以全部瀏覽。理解這個地方還需要對虛擬像素、物理像素和視口的一些知識，可以百度得到）于是就縮放頁面就成了一個很重要的需求，畢竟沒有人樂意看十分小的字。于是就造成了這個雙擊縮放的事件，隨之帶來了300ms延遲的響應。

現狀：如今智能手機越來越普及了，很多網站都做了響應式適配或者為移動端開發了m站，專門適配手機，也就使縮放顯得不是十分有必要了，而300ms的延遲還是會在一定程度上影響客戶體驗。

移動端點擊事件基本知識
點擊事件觸發的順序 touchstart -> touchend -> mousedown -> mouseup -> click
在touchstart和touchend中使用preventDefault()方法可以取消點擊事件，同時也會取消對表單的focus事件
在mousedown mouseup mousemove中調用preventDefault()方法并不能取消click事件

解決辦法及其優劣
1.設置<meta name="viewport" content="user-scalable=no" />
既然是雙擊縮放的鍋，那么我們直接禁止用戶縮放，自然也就咩有了300ms延遲。但是缺點也很明顯，即阻止了雙擊縮放，也阻止了兩個手指的縮放，再有這個需求的時候顯得很尷尬
2.設置<meta name="viewport" content="width=device-width, initial-scale=1">
較高級的瀏覽器都會在看到這個meta標簽的時候都會移除300ms的點擊判斷。
缺點大概就是如果你需要兼容很低版本的瀏覽器，最好先測試一下這個標簽能不能有效果，因為真的很少瀏覽器在設置這個標簽后還會有300ms的點擊延遲
3.使用zepto的tap事件
從原理上說是監聽touchstart和touchend 在結束的時候模擬一個tap事件并觸發他，來獲得與touchend同時相應的效果。
會有點透的問題（這個問題可以百度google一下，不詳細說了）就是因為并沒有做事件的取消，導致上層tap后，300ms過后點擊事件作用在了下層元素上。
并且不利于做移動pc端的統一，需要給兩個端綁定不同的事件，比較麻煩
4.使用fastclick庫
從原理上說也是監聽touchstart和touchend事件，在結束的時候模擬一個click事件并立即觸發他，同時取消300ms后應該觸發的click事件。
這個庫很棒，但是會增加項目體積。也會出現一些focus事件上的小bug。

fastclick源碼
網上已經有了許多fastclick的源碼注釋，喜歡看的可以自行研究一下(還是可以學到一些api和一些有趣的bug及對點擊事件處理有更加好的認識)。該庫的整體思路也已經在上面說過了，也做了很多兼容性的處理。不過這個庫已經很久沒更新了，按照我現在的測試結果來看庫里的對是否需要fastclick檢驗已經沒有再更新了（例如ios的一些系統已經可以用meta標簽來避免300ms的延遲
github官網上說的并不是很全面，通過看源碼與自己測試得出以下情況并不需要fastclick

• chrome系列 版本 >= 32 并設置了meta標簽的安卓 || 其他系統的chrome
• 黑莓 版本>= 10 并設置了meta標簽
• IE10 設置了-ms-touch-action: none or manipulation
• IE11 設置了touch-action: none or manipulation
• 火狐 版本>=27 并設置了meta標簽
• IOS 測試了較高版本的IOS都沒有什么問題（自己測試的，源碼里認為IOS設備都需要fastclick）

最后的建議
如果不需要兼容很低的瀏覽器，盡量使用meta標簽來解決，很完美沒有什么副作用，不用引庫體積也小。