fastclick.js解決移動端點擊事件反應慢問題

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

瞭解fastclick：http://www.cnblogs.com/yexiaochai/p/3442220.html

問題的發現

上班作項目的時候碰到一個移動端項目，其中有個小遊戲，至關於天上掉餡餅，用戶須要點擊餡餅得到。遊戲作好以後在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

window.addEventListener(function(){

     FastClick.attach( document.body );},false );

fastclick.js下載地址：https://github.com/ftlabs/fastclick

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

[javascript] view plain copy

$(function() {

        FastClick.attach(document.body);});

若是你使用Browserify或者其餘CommonJS-style 系統,當你調用`require('fastclick')`時，`FastClick.attach`事件會被返回，加載FastClick最簡單的方式就是下面的方法了：

        var attachFastClick = require('fastclick');

       attachFastClick(document.body); 

方法三：指針事件

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

指針事件 (Pointer Events) 目前兼容性不太好，不知道在之後會不會更加支持。

注意事項

要注意使用場景。

轉載來源：https://www.cnblogs.com/jianzhixuan/p/6944960.html