js-解決移動端點擊事件的延遲問題
眾所周知,在手機上的點擊事件會有延遲300ms的問題。但在做手機端某些點擊小遊戲時,我們就需要取消這個延遲的問題;
第一步:禁止頁面的縮放
- <meta name="viewport" content="width=device-width user-scalable= ‘no‘">
這塊內容能解決一些部分手機的問題
第二步: fastclick.js
FastClick 是 FT Labs 專門為解決移動端瀏覽器 300 毫秒點擊延遲問題所開發的一個輕量級的庫。簡而言之,FastClick 在檢測到touchend事件的時候,會通過 DOM 自定義事件立即觸發一個模擬click事件,並把瀏覽器在 300 毫秒之後真正觸發的click事件阻止掉。使用方法如下。
1:在頁面中引入fastclick.js文件。
2:在js文件中添加以下代碼
在 window load 事件之後,在body上調用FastClick.attach()即可。
window.addEventListener(function(){
FastClick.attach( document.body );
},false );
如果使用了jquery插件
$(function() {
FastClick.attach(document.body);
});
我這邊代碼用到的
<script src="js/fastclick.js"></script>
// 處理移動端 click 延遲
if (‘addEventListener‘ in document) {
document.addEventListener(‘DOMContentLoaded‘, function() {
FastClick.attach(document.body);
}, false);
}
js-解決移動端點擊事件的延遲問題