移動端點擊（click）事件延遲問題的產生與解決方案

標籤：name   特定   使用者   自訂事件   csdn   jquery   rmi   alt   mouse   

http://blog.csdn.net/xjun0812/article/details/64919063

 

問題的發現

      上班做項目的時候碰到一個移動端項目，其中有個小遊戲，相當於天上掉餡餅，使用者需要點擊餡餅獲得。遊戲做好之後在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毫毛的延遲。目前有以下方法：

 

方法一：靜止縮放

 

 

[html] view plain copy 

1. <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()即可。

 

[javascript] view plain copy 

1. window.addEventListener(function(){   
2.     FastClick.attach( document.body );  
3. },false );  

      如果你項目使用了JQuery，就將上面的代碼改寫成：

 

 

[javascript] view plain copy 

1. $(function() {    
2.     FastClick.attach(document.body);    
3. });  

 

 

方法三：指標事件

      指標事件最初由微軟提出，現已進入 W3C 規範的候選推薦標準階段 (Candidate Recommendation)。指標事件是一個新的 web 事件系列，相應的規範旨在使用一個單獨的事件模型，對所有輸入類型，包括滑鼠 (mouse)、觸摸 (touch)、觸控 (stylus) 等，進行統一的處理。

      指標事件 (Pointer Events) 目前相容性不太好，不知道在以後會不會更加支援。

移動端點擊（click）事件延遲問題的產生與解決方案