參考http://blog.csdn.net/xjun0812/article/details/64919063
http://www.jianshu.com/p/16d3e4f9b2a9
問題的發現
上班做項目的時候碰到一個移動端項目，其中有個小游戲，相當於天上掉餡餅，用戶需要點擊餡餅獲得。游戲做好之后在pc端測試是沒問題的，安卓手機上測試也是沒問題的，但是部分蘋果手機就出現了問題，用戶點擊餡餅沒有反應。
后來調試的時候，我讓這些餡餅靜止在屏幕上，這些蘋果手機用戶就可以點擊了。才發現是因為點擊事件延遲的原因導致移動的對象不能被用戶點擊，經過一定時間的延遲，該對象已經移到到其他地方去了。
移動端頁面對於點擊事件會有300毫秒的延遲，也就是js捕獲click事件的回調函數處理，需要300ms后才生效，導致多數用戶感覺移動設備上基於HTML的web應用界面響應速度慢，甚至有時候會影響一些業務邏輯的處理。
為什么會存在延遲？
Google開發者文檔中有提到：
mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.
移動瀏覽器為什么會設置300毫秒的等待時間呢？這與雙擊縮放的方案有關。平時我們有可能已經注意到了，雙擊縮放，即用手指在屏幕上快速點擊兩次，可以看到內容或者圖片放大，再次雙擊，瀏覽器會將網頁縮放至原始比例。
瀏覽器捕獲第一次單擊后，會先等待一段時間，如果在這段時間區間里用戶未進行下一次點擊，則瀏覽器會做單擊事件的處理。如果這段時間里用戶進行了第二次單擊操作，則瀏覽器會做雙擊事件處理。這段時間就是上面提到的300毫秒延遲。
如何避免延遲
在特定場景如一些游戲頁面，我們需要取消300毫毛的延遲。目前有以下方法：
方法一：靜止縮放
- <meta name="viewport" content="width=device-width user-scalable= 'no'">
使用這個方法必須完全禁用縮放來達到目的，雖然大部分移動端能解決這個延遲問題，但是部分蘋果手機還是不行。
方法二：fastclick.js
FastClick 是 FT Labs 專門為解決移動端瀏覽器 300 毫秒點擊延遲問題所開發的一個輕量級的庫。簡而言之，FastClick 在檢測到touchend事件的時候，會通過 DOM 自定義事件立即觸發一個模擬click事件，並把瀏覽器在 300 毫秒之后真正觸發的click事件阻止掉。使用方法如下。
第一步：在頁面中引入fastclick.js文件。
第二步：在js文件中添加以下代碼
在 window load 事件之后，在body上調用FastClick.attach()即可。
- window.addEventListener(function(){
- FastClick.attach( document.body );
- },false );
如果你項目使用了JQuery，就將上面的代碼改寫成：
- $(function() {
- FastClick.attach(document.body);
- });
方法三：指針事件
指針事件最初由微軟提出，現已進入 W3C 規范的候選推薦標准階段 (Candidate Recommendation)。指針事件是一個新的 web 事件系列，相應的規范旨在使用一個單獨的事件模型，對所有輸入類型，包括鼠標 (mouse)、觸摸 (touch)、觸控 (stylus) 等，進行統一的處理。
指針事件 (Pointer Events) 目前兼容性不太好，不知道在以后會不會更加支持。
注意事項
要注意使用場景。
文中表述僅代表個人觀點，如果有更好的方法，歡迎分享。