移动端300ms点击延迟本质是浏览器为识别双击缩放而等待判断，可通过touchstart/pointerdown替代click、fastclick库、css的touch-action:manipulation等方案消除。
移动端 300ms 点击延迟本质是浏览器为识别双击缩放而做的等待判断，JavaScript 本身不产生延迟，但可通过干预事件流、绕过原生 click 或提前响应来消除感知延迟。核心思路是：不让浏览器走默认的 click 判定流程。
用 touchstart 替代 click 实现即时响应
touchstart 在手指接触屏幕瞬间就触发，无任何等待。适合按钮、图标等明确意图的点击区域。
- 直接绑定 touchstart 事件，避免使用 click
- 需手动防止误触：监听 touchmove，若发生位移则取消后续逻辑（区分点击与滑动）
- 注意兼容性：iOS Safari 和 Android Chrome 均支持，但需处理 click 冒泡干扰（可加 event.preventDefault() 阻止后续 click 触发）
引入 FastClick 库自动拦截并模拟 click
FastClick 是成熟稳定的方案，原理是在 touchend 后立即派发自定义 click，并阻止原生 click 的 300ms 触发。
- 引入脚本后调用 FastClick.attach(document.body) 即可全局生效
- 对已有 click 事件代码零改造，适合遗留项目快速接入
- 现代项目中已非首选（因 touch-action 更轻量），但在需兼容 iOS 9 或 Android 4.4 等旧系统时仍有效
结合 pointerdown 提升兼容性与触发时机
pointerdown 比 touchstart 更早触发，且统一了 mouse/touch/pen 输入，是 W3C 推荐的现代替代方案。
- 在支持的设备上，pointerdown 比 touchstart 平均快 10–30ms
- 需设置 touch-action: none 或 manipulation 配合，否则部分安卓浏览器可能仍抑制
- 建议 fallback 到 touchstart：先监听 pointerdown，降级时监听 touchstart
配合 CSS 层面禁用冗余行为
JS 优化效果依赖于浏览器是否“愿意”放弃 300ms 判定，CSS 是关键前提。
- 给可点击元素设置 touch-action: manipulation，明确告知浏览器只需响应点击，无需双击缩放或滚动
- 避免在 body 上全局设 touch-action: none，否则会禁用所有滚动，影响体验
- 搭配 viewport 设置 user-scalable=no 可进一步关闭双击缩放，但会牺牲用户自主缩放能力
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
