JavaScript中click事件默认等待300ms延迟问题详解

更新时间：2026年01月02日 10:21:08 作者：韩曙亮

这篇文章主要介绍了JavaScript中click事件默认等待300ms延迟问题,当用户单击页面元素时,浏览器无法立刻判断用户的操作是单次点击还是双击,因此浏览器会在首次点击后默认等待300ms左右,下面来深入介绍一下,需要的朋友可以参考下

一、JavaScript中click事件300ms延迟问题

1、问题来源

早期移动端浏览器为了实现 " 双击缩放 ( double tap to zoom ) " 功能而设计的等待机制 ;

在移动端网页发展初期 , 手机屏幕尺寸小、分辨率低 , 浏览器提供了 " 双击页面某区域 " 将该区域放大至全屏的功能 , 方便用户查看内容 ;

当用户单击页面元素时 , 浏览器无法立刻判断用户的操作是 :

单次点击 , 需要触发 click 事件 ;
双击缩放的第一次点击 , 需要等待第二次点击 , 间隔约 300ms ;

因此 , 浏览器会默认等待 300ms 左右 , 确认用户没有进行第二次点击后 , 才会触发原生的 click 事件 , 这就造成了 click 事件的 300ms 延迟 ;

2、浏览器适配问题

浏览器适配问题 :

早期浏览器 : click 事件 300ms 延迟问题在早期移动端浏览器 ( iOS Safari < 9.3、Android 原生浏览器 < 4.4 ) 中可以重现 ;
现代浏览器 : 现代浏览器已逐步优化 , 没有 300 ms 延迟问题 , 但部分老旧环境或特殊场景仍可能存在 ;

二、解决方案

1、设置viewport元标签(全局禁用/双击缩放功能)

在 HTML 的 <head> 中添加 viewport 配置 user-scalable=no , 指定页面缩放规则 , 禁用用户手动缩放 ( 包括双击缩放 ) :

<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 事件会立即触发 ;
兼容性 : 支持 iOS Safari >= 9.1、Android Chrome >= 36 , 现代移动端浏览器均兼容 ;

3、使用移动端原生触摸事件替代click事件

移动端浏览器提供了 touchstart、touchmove、touchend 等原生触摸事件 , 这些事件没有 300ms 延迟 , 可直接用于替代 click 事件实现点击交互 ;

优先使用 touchend 事件 , touchstart会在手指刚接触屏幕时触发 , 若用户只是滑动页面 ( 而非点击 ) , 也会触发该事件 , 容易造成误操作 ;

touchend在手指离开屏幕时触发 , 更贴近 " 点击 " 的交互逻辑 , 示例如下 :

// 获取目标元素
const btn = document.querySelector('.btn');
// 绑定touchend事件 , 替代click
btn.addEventListener('touchend', function(e) {
  // 阻止事件冒泡 ( 按需可选 ) 
  e.stopPropagation();
  // 阻止浏览器默认行为 ( 避免触发后续的click事件 , 防止点击穿透 ) 
  e.preventDefault();
  // 执行你的点击业务逻辑
  console.log('按钮被点击 ( 无300ms延迟 ) ');
  alert('触摸事件触发成功');
});

以上就是JavaScript中click事件默认等待300ms延迟问题详解的详细内容，更多关于JavaScript click事件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JS如何寻找数组中心索引过程解析
这篇文章主要介绍了JS如何寻找数组中心索引过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-06-06
JS刷新父窗口的几种方式小结(推荐)
下面小编就为大家带来一篇JS刷新父窗口的几种方式小结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
微信小程序中使用 async/await的方法实例分析
这篇文章主要介绍了微信小程序中使用 async/await的方法,结合实例形式分析了微信小程序中async/await的功能、使用方法及操作注意事项,需要的朋友可以参考下
2020-05-05
详解ES6 中的迭代器和生成器
迭代器是一个统一的接口，它的作用是使各种数据结构可以被便捷的访问，它是通过一个键为Symbol.iterator的方法来实现，这篇文章主要介绍了ES6 中的迭代器和生成器,需要的朋友可以参考下
2022-08-08
前端 javascript 实现文件下载的示例
这篇文章主要介绍了前端 javascript 实现文件下载的示例
2020-11-11
js与jquery回车提交的方法
这篇文章主要介绍了js与jquery回车提交的方法,实例分析了js与jQuery中监测及相应回车键实现提交的技巧,需要的朋友可以参考下
2015-02-02
javascript 数组使用方法汇总
由于javascript是一种无类型语言,所以一个数组的元素可以具有任意的数据类型,同一个数组的不同元素可以具有不同的类型,数组的元素设置可以包含其他数组,这样就可以创建一个复杂的数组了.
2009-12-12
Java Script网页设计案例详解
下面我将提供一个简单的JavaScript网页设计案例,该案例将实现一个动态的待办事项列表（Todo List）,用户可以在页面上添加新的待办事项,标记它们为已完成,以及删除它们,这篇文章主要介绍了Java Script网页设计案例,需要的朋友可以参考下
2024-08-08
js实现addClass,removeClass,hasClass的函数代码
js实现addClass,removeClass,hasClass的函数代码，需要的朋友可以参考下。
2011-07-07
JS中的算法与数据结构之集合(Set)实例详解
这篇文章主要介绍了JS中的算法与数据结构之集合(Set),结合实例形式详细分析了javascript中集合的概念、原理、定义及相关操作技巧,需要的朋友可以参考下
2019-08-08