移动端300ms点击延迟是为兼容双击缩放保留的历史机制，现代开发应优先使用touch-action: manipulation或viewport禁用缩放等原生方案，慎用已过时的fastclick。
移动端 300ms 点击延迟不是代码写错了，而是浏览器为兼容双击缩放而保留的历史机制。现代开发中，它已不需依赖老旧 JS 库硬扛，优先用轻量、原生、语义清晰的方案就能解决。
用 touch-action: manipulation 快速生效
这是当前最推荐的 CSS 方案，兼容 Chrome 36+、Safari 9.1+、Firefox 65+，无需 JS，无副作用，且保留平移和 pinch 缩放能力。
- 只对可点击元素启用，例如按钮、链接、菜单项：
.btn, .nav-link, [role="button"] { touch-action: manipulation; } - 避免全局加在
body上——若页面含地图、图表或图文混排区域，可能误禁有用的手势 - 注意层级覆盖：父级设了
touch-action: none，子级设manipulation也无效
viewport 控制：禁用缩放即停延迟
当明确不需要用户缩放时，user-scalable=no 或 maximum-scale=1.0 能让浏览器直接跳过双击判断逻辑，300ms 延迟基本消失。
- 最小必要写法：
<meta name="viewport" content="width=device-width, user-scalable=no"> - 不强制要求写
initial-scale=1.0，但加上更稳妥；maximum-scale=1.0单独使用也生效 - 代价是彻底禁用双指缩放（包括图片查看、表格细节放大等），需权衡内容场景
现代浏览器已默认优化，无需额外干预
iOS 10+ 和 Android Chrome 55+ 在满足 width=device-width + initial-scale=1.0 时，多数按钮类交互会自动跳过延迟，无需 FastClick 或自定义 tap。
- 测试确认方式：监听 click 事件打时间戳，看实际触发间隔是否稳定在 10ms 内
- 仍卡顿？检查是否被父容器的
touch-action: none或 CSS transform 阻断了优化路径 - 表单控件（如
<input type="text">）本身不走该优化路径，聚焦延迟需单独处理
慎用 FastClick，优先规避其适用场景
FastClick 曾是主流解法，但现在已过时。它需挂载到 document.body，易与 Vue/React 的动态节点、第三方组件冲突，还可能引发点击穿透。
- 穿透典型场景：弹层 A 点击关闭 → 300ms 后原生 click 落到下层 B 元素（尤其是
<a></a>或<button></button>）上 - 若必须用，务必配合
FastClick.detach()清理，尤其在 SPA 页面切换或组件卸载时 - 替代思路：用
pointerdown+preventDefault()拦截并手动派发 click，更可控
