移动端点击有300ms延迟是因为浏览器需等待判断是否双击缩放；用touch-action: manipulation可消除延迟，但需配合语义化、可访问性及视觉反馈优化。
移动端点击为什么有300ms延迟
这是浏览器为支持双击缩放（double-tap to zoom）预留的判断窗口：收到第一次 touchstart 后，需等待约300ms，看是否还有第二次触摸。若没有，才触发 click；若有，则执行缩放。这个机制在纯触控场景下毫无意义，反而让按钮响应发“滞”。
常见错误现象包括：
- 点击按钮后视觉反馈（如
:active样式）立刻生效，但绑定的click事件要等半拍才执行 - 在单页应用中，路由跳转或弹窗打开明显卡顿，用户误以为没点上而重复点击
用touch-action: manipulation彻底禁用双击缩放
touch-action: manipulation 是最直接、兼容性足够好的解法：它告诉浏览器“这个区域只做平移和 pinch 缩放，不需要双击逻辑”，从而跳过300ms等待，让 click 立即触发。
使用时注意：
- 仅对需要响应点击的容器（如按钮、链接、卡片）设置，不要全局写在
body或html上，否则可能影响页面内滚动或地图类交互 - 它不影响
touchstart/touchend，仍可同时监听这些事件做更精细控制 - Safari 11.1+、Chrome 56+、Firefox 62+ 均已支持；iOS Safari 从 iOS 10 开始稳定可用
示例：
.btn {
touch-action: manipulation;
}
哪些情况不能只靠touch-action
当元素本身不触发原生 click（比如 div 无 onclick 或未设 role="button"），或需要兼容极老 WebView（如 Android 4.4 系统 WebView），touch-action 单独使用无效。
此时应组合处理：
- 给非可点击语义元素加上
role="button"和tabindex="0"，确保它被识别为交互目标 - 监听
touchend并立即调用event.preventDefault()，再手动触发逻辑（注意避免与click重复执行） - 不推荐用
fastclick这类第三方库——现代浏览器已原生支持，额外脚本反而增加首屏负担和维护成本
别忽略:focus-visible和伪类样式同步
禁用300ms延迟后，click 立即触发，但部分设备（尤其是带物理键盘的 iPad 或 Windows 触摸笔记本）仍会进入焦点状态。如果只写了 :active 样式而没配 :focus 或 :focus-visible，用户可能看不到按下反馈。
建议统一处理：
- 所有可点击元素至少定义
:active和:focus - 若想区分鼠标/键盘焦点，用
:focus-visible（需加outline或背景变化） - 避免仅依赖
:hover做点击态，它在多数触摸设备上不触发
移动端点击延迟本质是历史包袱，而 touch-action: manipulation 是目前最轻量、最可控的破局点。真正容易被忽略的，是它和语义化、可访问性、视觉反馈之间的耦合——改一个属性不难，但漏掉其中一环，用户感知到的还是“卡”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
