JavaScript中click事件默認等待300ms延遲問題詳解

更新時間：2026年01月02日 10:21:08 作者：韓曙亮

這篇文章主要介紹了JavaScript中click事件默認等待300ms延遲問題,當用戶單擊頁面元素時,瀏覽器無法立刻判斷用戶的操作是單次點擊還是雙擊,因此瀏覽器會在首次點擊后默認等待300ms左右,下面來深入介紹一下,需要的朋友可以參考下

一、JavaScript中click事件300ms延遲問題

1、問題來源

早期移動端瀏覽器為了實現(xiàn) " 雙擊縮放 ( double tap to zoom ) " 功能而設計的等待機制 ;

在移動端網(wǎng)頁發(fā)展初期 , 手機屏幕尺寸小、分辨率低 , 瀏覽器提供了 " 雙擊頁面某區(qū)域 " 將該區(qū)域放大至全屏的功能 , 方便用戶查看內(nèi)容 ;

當用戶單擊頁面元素時 , 瀏覽器無法立刻判斷用戶的操作是 :

單次點擊 , 需要觸發(fā) click 事件 ;
雙擊縮放的第一次點擊 , 需要等待第二次點擊 , 間隔約 300ms ;

因此 , 瀏覽器會默認等待 300ms 左右 , 確認用戶沒有進行第二次點擊后 , 才會觸發(fā)原生的 click 事件 , 這就造成了 click 事件的 300ms 延遲 ;

2、瀏覽器適配問題

瀏覽器適配問題 :

早期瀏覽器 : click 事件 300ms 延遲問題在早期移動端瀏覽器 ( iOS Safari < 9.3、Android 原生瀏覽器 < 4.4 ) 中可以重現(xiàn) ;
現(xiàn)代瀏覽器 : 現(xiàn)代瀏覽器已逐步優(yōu)化 , 沒有 300 ms 延遲問題 , 但部分老舊環(huán)境或特殊場景仍可能存在 ;

二、解決方案

1、設置viewport元標簽(全局禁用/雙擊縮放功能)

在 HTML 的 <head> 中添加 viewport 配置 user-scalable=no , 指定頁面縮放規(guī)則 , 禁用用戶手動縮放 ( 包括雙擊縮放 ) :

<head>
  <!-- 核心配置 : initial-scale=1.0 固定初始縮放比例 , user-scalable=no 禁用縮放 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>

viewport 關鍵屬性說明 :

width=device-width : 讓頁面寬度適配設備屏幕寬度 ;
initial-scale=1.0 : 初始縮放比例為 1:1 , 無默認縮放 ;
maximum-scale=1.0 : 限制最大縮放比例為 1:1 ;
user-scalable=no : 禁止用戶手動縮放頁面 ( 包括雙擊縮放和捏合縮放 ) ;

2、使用CSS的touch-action屬性(局部/全局禁用)

touch-action 是 CSS3 新增屬性 , 用于指定瀏覽器如何處理元素的觸摸事件 , 設置為 manipulation 可禁用雙擊縮放 , 同時保留平移 ( 滑動 ) 和捏合縮放功能 ( 比 user-scalable=no 更靈活 ) :

/* 全局生效 : 禁用所有元素的雙擊縮放 */
* {
  touch-action: manipulation;
}
/* 局部生效 : 僅禁用指定按鈕的雙擊縮放 */
.btn {
  touch-action: manipulation;
}

作用 : 告訴瀏覽器 , 該元素的觸摸操作僅支持 " 平移 " 和 " 捏合縮放 " , 不支持 " 雙擊縮放 " , 因此無需等待 300ms , click 事件會立即觸發(fā) ;
兼容性 : 支持 iOS Safari >= 9.1、Android Chrome >= 36 , 現(xiàn)代移動端瀏覽器均兼容 ;

3、使用移動端原生觸摸事件替代click事件

移動端瀏覽器提供了 touchstart、touchmove、touchend 等原生觸摸事件 , 這些事件沒有 300ms 延遲 , 可直接用于替代 click 事件實現(xiàn)點擊交互 ;

優(yōu)先使用 touchend 事件 , touchstart會在手指剛接觸屏幕時觸發(fā) , 若用戶只是滑動頁面 ( 而非點擊 ) , 也會觸發(fā)該事件 , 容易造成誤操作 ;

touchend在手指離開屏幕時觸發(fā) , 更貼近 " 點擊 " 的交互邏輯 , 示例如下 :

// 獲取目標元素
const btn = document.querySelector('.btn');
// 綁定touchend事件 , 替代click
btn.addEventListener('touchend', function(e) {
  // 阻止事件冒泡 ( 按需可選 ) 
  e.stopPropagation();
  // 阻止瀏覽器默認行為 ( 避免觸發(fā)后續(xù)的click事件 , 防止點擊穿透 ) 
  e.preventDefault();
  // 執(zhí)行你的點擊業(yè)務邏輯
  console.log('按鈕被點擊 ( 無300ms延遲 ) ');
  alert('觸摸事件觸發(fā)成功');
});

以上就是JavaScript中click事件默認等待300ms延遲問題詳解的詳細內(nèi)容，更多關于JavaScript click事件的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: