1. 程式人生 > >移動端click事件延遲300ms問題(web頁面點選沒問題,手機端單擊變成雙擊效果)

移動端click事件延遲300ms問題(web頁面點選沒問題,手機端單擊變成雙擊效果)

移動端300ms點選延遲和點選穿透問題詳細原理參考https://www.jianshu.com/p/6e2b68a93c88(此文章內方法未測試,只參考原理)

具體解決方案如下:(親測有效)

作業系統ubuntu18.4 64位

因為歷史原因,移動端點選事件會有300ms延遲,來判斷使用者是連續雙擊縮放還是點選跳轉。即如果300ms內連續點選兩次,則會理解為對頁面進行縮放操作(當然前提是移動端頁面設定為可縮放的);在一次點選之後如果300ms內沒有再次發生點選事件,那麼系統會預設為跳轉事件,點選300ms後進行跳轉。所以移動端正常跳轉頁面會有300ms延遲問題。

使用fastclick.js可以遮蔽移動端的300ms問題。引入fastclick.js外掛然後新增下邊程式碼。

https://github.com/ftlabs/fastclick

if ('addEventListener' in document) {  
    document.addEventListener('DOMContentLoaded', function() {  
        FastClick.attach(document.body);  
    }, false);  
} 

如果同時使用了jquery

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

如果使用了模組載入工具

var
attachFastClick = require('fastclick'); attachFastClick(document.body);