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

慕容初晨發表於2018-01-09

參考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毫毛的延遲。目前有以下方法:

方法一:靜止縮放

  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


相關文章