更新時間:2023-09-27 來源:黑馬程序員 瀏覽量:
在移動端使用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的延時問題
設置瀏覽器禁用默認的雙擊縮放即可去掉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延時問題，示例代碼如下：
JavaEE
鴻蒙應用開發(fā)
集成電路應用開發(fā)
人工智能開發(fā)
AI+Linux云計算運維
Python+大數(shù)據(jù)開發(fā)
AI+設計
軟件測試
新媒體+短視頻
HTML&JS+前端
//封裝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í)行回調函數(shù)
}
isMove=false; // 取反
startTime=0;
});
}
// 調用
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頁面中，編寫結構代碼，示例代碼如下：
<body> <div></div> </body>
(4)在<script>標簽中的Fastclick實例化代碼后，編寫JavaScript代碼，綁定click事件，示例代碼如下：
var Odiv=document.querySelector('div');
Odiv.addEventListener('click', function(){
alert（'點擊操作')；
});
據(jù)學科列表頁右側.png)
.jpg)