html5页面手机点击延迟300ms是为双击缩放兼容设计，禁用缩放或用touchstart可消除；需preventdefault、兼顾click兼容性，pwa下还需touch-action:manipulation。
为什么 HTML5 页面在手机上点按钮总要等半拍
因为浏览器默认加了 300ms 延迟，用来判断你是不是要双击缩放。这不是 bug，是历史兼容机制，但对按钮、开关、菜单这类需要即时反馈的交互来说，体验就是卡顿。
关键不是“能不能去掉”，而是“去掉后会不会出问题”——答案是：只要不用双击缩放，就可以安全关掉。
touchstart 替代 click 的实操要点
直接监听 touchstart 能绕过延迟，但要注意它和 click 的行为差异：
-
touchstart在手指刚碰到屏幕就触发，click要等抬起且没移动才触发，所以误触风险更高 - 必须手动加
preventDefault()阻止默认行为（比如滚动），否则在某些 Android WebView 里可能失效 - 不要只绑
touchstart就完事——得同时兼容 PC 的click和 iOS 的touchend，否则桌面端或旧版 Safari 点不了
简单写法示例：
立即学习“前端免费学习笔记（深入）”；
element.addEventListener('touchstart', e => {
e.preventDefault();
handleClick();
}, { passive: false });
element.addEventListener('click', handleClick);
用 viewport 元标签禁用缩放最省事
这是最轻量、兼容性最好的方案，适用于绝大多数单页应用或管理后台：
- 在
里加：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 加了
user-scalable=no或maximum-scale=1.0后，Chrome / Safari / Firefox 移动版都会自动取消 300ms 延迟 - 注意：如果页面本身需要双击放大（比如看图页、PDF 预览），这个方案就不适用，会直接禁用用户缩放能力
第三方库如 fastclick 现在还值得用吗
不推荐新项目引入 fastclick：
- 现代 Chrome（v56+）、Safari（iOS 10+）、Firefox for Android 都已原生支持
viewport触发的延迟消除 -
fastclick会额外增加约 2KB gzip 后体积，还要处理focus、input等元素的特殊逻辑 - 它内部用的是
touchend+setTimeout模拟 click，反而在某些低端安卓机上引入新的微延迟
老项目如果已有 fastclick 且运行稳定，不用急着删；新项目优先用 viewport + touchstart 组合。
真正容易被忽略的是：iOS Safari 在「添加到主屏幕」后的 PWA 模式下，即使写了 viewport，有时仍会保留延迟——这时候必须加上 touch-action: manipulation 到按钮样式里才行。
