针对大多数现代浏览器，最推荐的做法是正确配置 viewport 元标签并配合 CSS 的 touch-action 属性，这能从根本上消除浏览器等待双击缩放产生的延迟。
先说结论：优先检查 meta viewport 设置，再补充 CSS 控制，最后才考虑 JS 方案。
- 先定位：确认延迟是否来自浏览器默认的双击缩放等待机制。
- 先做：配置 user-scalable=no 或 touch-action: manipulation。
- 注意：user-scalable=no 可能影响无障碍访问，需评估业务场景。
- 再验证：在真机上测试点击反馈，而非仅依赖模拟器。
快速处理思路
这不是命令行操作，而是前端代码配置。直接在 HTML head 区域和 CSS 文件中加入以下设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">html { touch-action: manipulation; }为什么会这样
早期移动端浏览器为了支持双击缩放功能，会在用户单次点击后等待约 300 毫秒，确认没有第二次点击才会触发 click 事件。虽然现代浏览器在检测到特定配置后会自动取消这个等待，但如果页面缺少相应声明，浏览器仍会保守地保留这段延迟。
分步处理
第一步：检查 viewport 设置
确保 HTML 头部包含 viewport meta 标签。如果业务不需要缩放，设置 user-scalable=no 是最直接的办法。
注意无障碍风险：user-scalable=no 会禁止用户放大页面，可能违反 WCAG 无障碍标准。如果必须允许缩放但想消除延迟，可尝试 combination 方案，但兼容性需测试。
第二步：添加 CSS 控制
给可点击元素或全局 html 标签添加 touch-action: manipulation。这告诉浏览器只处理单手操作，不需要等待双击检查。
第三步：优化事件监听
如果使用 addEventListener，建议传入 passive: true 选项，表明不会调用 preventDefault，有助于提升滚动和触摸性能。代码如下：
document.addEventListener('touchstart', function(e) {// 处理逻辑
}, { passive: true });怎么验证是否生效
1. 打开 Chrome DevTools，切换到 Performance 面板。
2. 点击录制按钮，在真机或模拟器上进行点击操作。
3. 停止录制，在 Event 标签中查看 click 事件的触发时间。
4. 观察 Input 事件到 Paint 之间的延迟，理想情况下点击反馈应在 100ms 内完成。
常见坑
1. iOS Safari 对 viewport 的处理有时较严格，user-scalable=no 在某些版本可能被忽略，需配合 touch-action 使用。
2. 不要盲目引入 FastClick 等库，现代浏览器已原生支持优化，旧库可能带来兼容性问题。
3. 输入框聚焦问题，某些优化方案可能导致软键盘弹出延迟或失效。
4. 无障碍访问风险，禁止缩放可能导致视障用户无法正常使用页面。
参考来源
MDN Web Docs - viewport meta tag: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Viewport_meta_tag
MDN Web Docs - touch-action: https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action
Google Developers - 300ms tap delay gone away: https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away
原文链接：https://www.zjcp.cc/ask/10971.html