解決移動端點擊300ms延遲

爲什麼會出現 300ms 延遲?

系統需要判斷點擊後300ms之內是否有第二次點擊,如果有,就是放大縮小整個窗口查
看窗口內容。如果沒有第二次點擊,就會傳入click事件給頁面。那麼頁面的click就會導
致有300ms延遲。

解決的方法

通用的js解決方案,使用fastclick

原理

在檢測到 touchend 事件的時候,會通過DOM自定義事件立即出發模擬一個click事件
並把瀏覽器在300ms之後真正的click事件阻止掉

使用

在 javascript 保重下載了 fastclick.js,把它添加到 html 頁面

<script type='application/javascript' src='/path/to/fastclick.js'></script>
if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function() {
		FastClick.attach(document.body);
	}, false);
}

CommonJS 模塊裏面可以這樣使用

npm install fastclick -S 
var attachFastClick = require('fastclick');
attachFastClick(document.body);

Vue 中使用

npm install fastclick -S 
import FastClick from 'fastclick'        
FastClick.attach(document.body);

fastclick github地址
see you ~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章