移動端點選事件300ms延遲問題解決方案——fastclick.js
阿新 • • 發佈:2018-11-30
移動端點選事件300ms延遲的問題由來已久,如下截圖
下面截圖來自原文:https://www.jianshu.com/p/6e2b68a93c88
網上關於300ms延遲問題的解決方法,大致分為 3 種
①:使用 meta viewport 屬性禁用縮放,並讓視口寬度等於裝置寬度
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
②:使用 touch-action:none; 這句程式碼的意思是 禁止觸發預設的手勢操作
個人不推薦這個方法,之前寫過一篇部落格,因使用了該屬性後踩的坑
詳見:https://www.cnblogs.com/tu-0718/p/7411907.html
③:使用FastClick.js庫
FastClick是專門為解決移動端瀏覽器 300 毫秒點選延遲問題所開發的一個輕量級的庫。
FastClick的實現原理是在檢測到touchend事件的時候
會通過DOM自定義事件立即出發模擬一個click事件,並把瀏覽器在300ms之後的click事件阻止掉
個人推薦 FastClick.js ,下面簡述一下使用方法以及注意事項
①:首先引入 FastClick.js 檔案
②:呼叫 FastClick.attach() 方法,呼叫該方法的寫法有 3 種 ,如下
js
window.onload = function() { FastClick.attach(document.body); }
if('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }); }
jquery
$(function() { FastClick.attach(document.body); });
注:引用了 Fastclick.js 後,就只能用 addEventListener 繫結事件,而不能直接用 element.click 的方式新增事件
否則可能會出現點選事件不觸發,或觸發以後不執行方法
這樣是可以的
element.addEventListener('click', function() { element.className = 'tu-mask'; element.style.display = "block"; });
這樣就不行了
element.click = function() { element.className = 'tu-mask'; element.style.display = "block"; }