移动端按钮点击300ms延迟是浏览器为双击缩放预留的判断时间；现代浏览器在正确设置viewport且启用缩放时默认禁用该延迟，推荐使用button[type="button"]配合viewport和touch-action:manipulation解决。
为什么移动端按钮点击有300ms延迟
这是浏览器为双击缩放预留的判断时间。当你用 onclick 绑定事件，手指触达屏幕后，浏览器会等约300ms确认你不是要双击——哪怕你的按钮根本不需要双击功能。
这个延迟在iOS Safari、Android Chrome（旧版）、部分UC/QQ内核中普遍存在。现代Chrome 56+ 和 Safari 10.3+ 在启用 viewport 的页面里已默认禁用该延迟，但前提是：<meta name="viewport" content="width=device-width, initial-scale=1"> 必须存在且生效。
- 没加 viewport 标签？延迟必现
- 写了但
user-scalable=no或maximum-scale=1锁死缩放？部分安卓WebView仍可能保留延迟 - 用
button元素但没设type="button"？某些老内核会把它当 submit 处理，触发额外校验逻辑
用 touchstart + preventDefault 真的靠谱吗
直接在 touchstart 里调用 event.preventDefault() 能立刻消除延迟，但副作用明显：它同时阻止了页面滚动——用户从按钮区域开始拖动，页面就卡住不动了。
更稳妥的做法是只对明确意图为“点击”的操作拦截，默认允许滚动：
立即学习“前端免费学习笔记（深入）”；
- 监听
touchstart记录起始坐标和时间戳 - 在
touchend中检查位移是否< 10px、耗时是否< 500ms - 满足条件才执行业务逻辑，并在
touchstart中调用preventDefault()——仅当判定为点击时才阻断默认行为
注意：preventDefault() 必须在 touchstart 阶段调用才有效，touchend 里调无效。
推荐方案：fastclick 库或原生 passive 选项
自己手写防误判逻辑容易漏边界情况（比如快速连点、多指触控）。生产环境建议用成熟方案：
- 用
fastclick：初始化时FastClick.attach(document.body)，自动处理所有click延迟，兼容性覆盖到 Android 2.3+ - 现代方案：给事件监听器加
{ passive: false }并在touchstart判定后调preventDefault()，但需注意 Chrome 对 passive 默认为 true，不显式声明会导致preventDefault()失效并报 warning - 最轻量解法：直接用
<button type="button">+ 正确viewport+ CSScursor: pointer，90% 场景已无感延迟
别忽略 touch-action CSS 属性
即使你绑了 touchstart，系统级手势（如滑动、捏合）仍可能干扰按钮响应。比如用户想横向滑动轮播图，却误触了上面的按钮。
用 touch-action 明确告诉浏览器哪些操作由 JS 处理、哪些交给原生：
-
touch-action: manipulation：允许浏览器优化点击和双击，同时禁止非必要缩放和平移——这是按钮/开关类元素最常用值 -
touch-action: none：完全交由 JS 处理，适合自定义手势组件，但会禁用所有原生滚动 - 避免设
touch-action: auto（默认值），尤其在小尺寸按钮上，它会让浏览器保留全部手势判定逻辑
这个属性必须写在按钮本身或其父容器上才生效，且不支持继承。
