移動端產生300ms延遲的原因
移動瀏覽器為什麼會設定300毫秒的等待時間呢？這與雙擊縮放的方案有關。平時我們有可能已經注意到了，雙擊縮放，即用手指在螢幕上快速點選兩次，可以看到內容或者圖片放大，再次雙擊，瀏覽器會將網頁縮放至原始比例。
瀏覽器捕獲第一次單擊後，會先等待一段時間，如果在這段時間區間裡使用者未進行下一次點選，則瀏覽器會做單擊事件的處理。如果這段時間裡使用者進行了第二次單擊操作，則瀏覽器會做雙擊事件處理。這段時間就是上面提到的300毫秒延遲。
解決300ms延遲的方案
一，禁止縮放
縮放時移動端點選事件產生延遲的根本原因，在 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 上並不起作用，還會降低有視覺或運動障礙使用者的可訪問性。
二，使用fastclick庫
FastClick 是 FT Labs 專門為解決移動端瀏覽器 300 毫秒點選延遲問題所開發的一個輕量級的庫。簡而言之，FastClick 在檢測到touchend事件的時候，會通過 DOM 自定義事件立即觸發一個模擬click事件，並把瀏覽器在 300 毫秒之後真正觸發的click事件阻止掉。
window.addEventListener(function(){ FastClick.attach( document.body ); },false );複製程式碼三，使用移動端點選事件touchend
顧名思義在觸控後觸發，相對應的事件有touchstart，touchmove，touchend，完全可以在 WebGL 或 canvase 遊戲中進行實踐,但是在web 頁面中單單使用 touchend 並不一定靠譜。
touchend存在的問題：
1、如果使用者在兩個不同元素之間觸發了 touchstart 和touchend，那麼 click 不會被觸發 .
2、如果使用者觸發了 touchstart,但是在touchend之前是一個長長的 touchmove 滾動, 那麼 click 也不會被觸發.
3、在站點上任然應該保留 click 事件以相容那些非觸控裝置,這是你就要考慮事件的重複觸發問題.
四，指標事件
指標事件最初由微軟提出，現已進入 W3C 規範的候選推薦標準階段 (Candidate Recommendation)。指標事件是一個新的 web 事件系列，相應的規範旨在使用一個單獨的事件模型，對所有輸入型別，包括滑鼠 (mouse)、觸控 (touch)、觸控 (stylus) 等，進行統一的處理。
指標事件目前相容性不太好，還需要更多的而瀏覽器進行支援。