移動端click事件延遲300ms問題(web頁面點選沒問題,手機端單擊變成雙擊效果)
阿新 • • 發佈:2018-12-17
移動端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);
});
如果使用了模組載入工具
varattachFastClick = require('fastclick'); attachFastClick(document.body);