首頁常見問題正文

怎樣解決移動端click事件的延時問題？

更新時間:2023-09-27 來源:黑馬程序員 瀏覽量:

1695724505873_黑馬程序員好口碑IT教育.gif

在移動端使用click事件時會出現(xiàn)300ms左右的延時問題，其原因是瀏覽器需要判斷用戶的操作是單次點擊還是雙次點擊。例如，在手機上瀏覽網(wǎng)頁時，由于手機屏幕比較小，頁面中可能會有一些文字看不清楚。為了看清楚文字，用戶通常會快速雙擊屏幕放大頁面查看內(nèi)容。當用戶第一次點擊屏幕時，瀏覽器無法立刻判斷用戶的操作，瀏覽器會等待300ms。如果用戶在300ms內(nèi)再次點擊了屏幕，瀏覽器就會認為是一個雙次點擊的操作，否則就會認為是一個單次點擊操作。

隨著移動端網(wǎng)頁的流行與普及，用戶對網(wǎng)頁性能有了更高的要求，而在移動端使用click事件會出現(xiàn)延時，這會影響用戶的體驗。下面我們給出了3個解決方案，用來處理click事件出現(xiàn)300ms延時的問題，大家可以根據(jù)實際需求進行選擇。

1.禁用縮放解決移動端click事件出現(xiàn)300ms的延時問題

設(shè)置瀏覽器禁用默認的雙擊縮放即可去掉300ms的點擊延時，示例代碼如下：

<meta name="viewport" content="user-scalable=no">
上述代碼中，使用user-scalable=no表明這個頁面不可縮放，此時瀏覽器就會禁用雙擊縮放并且去掉300ms點擊延時。但這個方案存在缺點，它完全禁用了雙擊縮放，當我們需要放大文字或者圖片時無法滿足需求。

2.封裝touch事件解決移動端click 事件出現(xiàn)300 ms的延時問題

當瀏覽器允許用戶縮放頁面時，可以對touch事件進行封裝，解決300ms延時問題，具體實現(xiàn)思路如下：

①當手指觸摸屏幕時，記錄當前觸摸開始的時間。

②當手指離開屏幕時，用離開的時間減去觸摸開始的時間，得到手指停留時間。

③如果手指停留時間小于150ms，并且沒有滑動過屏幕，就定義為單次點擊。

下面編寫代碼將touch事件手動封裝成一個tap事件，解決300ms延時問題，示例代碼如下：

//封裝tap事件
function tap(obj,callback) {
  var isMove=false;           
//記錄手指是否移動
  var startTime=0;            //記錄觸摸時的時間變量
  obj.addEventListener('touchstart',function(e){
    startTime=Date.now();
}):  //記錄觸摸時間
  });
obj.addEventListener('touchmove',function (e){
    isMove=true;              //查看手指是否有滑動（如果有，屬于拖曳，不屬于點擊）
  });
  obj.addEventListener('touchend',function (e){
if(!isMove &6 (Date.now()-startTime)<150){
       // 如果手指觸摸和離開時間小于150ms，屬于點擊
         callback && callback（）；//執(zhí)行回調(diào)函數(shù)
    }
    isMove=false;                  // 取反
    startTime=0;
  });
}
// 調(diào)用
tap(div,function(){
//執(zhí)行點擊后的代碼
});

上述方案可以檢測單個元素發(fā)生點擊時的狀態(tài)，解決移動端click事件出現(xiàn)300ms的延時問題。

3.使用FastClick 插件解決移動端click 事件出現(xiàn)300 ms的延時問題

FastClick 插件是由FT Labs(英國金融時報實驗室)團隊開發(fā)的JavaScript庫，它簡單易用，容易上手，解決了click事件在移動端觸發(fā)時有大約300ms延時的問題。FastClick的實現(xiàn)原理是在檢測到touchend事件時，通過DOM自定義事件立即觸發(fā)click事件，并阻止瀏覽器在300 ms之后的click事件。

下面講解如何使用FastClick 插件解決移動端click事件出現(xiàn)300 ms的延時問題，具體步驟如下。

(1)通過官網(wǎng)下載fastclick.js至本地，并在HTML頁面中使用<script>標簽引入fastclick.js文件，引入方式如下：、

<script src="fastclick.js"></script>

(2)通過JavaScript方式對Fastclick進行實例化，示例代碼如下：

  if('addEventListener'in document){
    document.addEventListener ('DOMContentLoaded', function () {
      FastClick.attach(document.body);
    }, false);
  }

上述代碼中，F(xiàn)astClick.attach()方法的參數(shù)可以是任意的DOM元素，在這里使用document.body表示將body元素中的所有子元素都綁定FastClick事件，解決移動端click。

(3)在HTML頁面中，編寫結(jié)構(gòu)代碼，示例代碼如下：

<body>
  <div></div>
</body>

(4)在<script>標簽中的Fastclick實例化代碼后，編寫JavaScript代碼，綁定click事件，示例代碼如下：

var Odiv=document.querySelector('div');
Odiv.addEventListener('click', function(){
  alert（'點擊操作')；
});


分享到：
在線咨詢 我要報名
和我們在線交談！