1. 程式人生 > >js-解決移動端點擊事件的延遲問題

js-解決移動端點擊事件的延遲問題

發的 問題 key port 引入 body 點擊事件 function dev

眾所周知,在手機上的點擊事件會有延遲300ms的問題。但在做手機端某些點擊小遊戲時,我們就需要取消這個延遲的問題;

第一步:禁止頁面的縮放

  1. <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-解決移動端點擊事件的延遲問題