移动端click事件300ms延迟源于双击缩放兼容逻辑，可通过touchstart替代、viewport禁用缩放或CSS touch-action: manipulation消除，结合事件委托与防重复触发实现即时响应。
移动端 click 事件的 300ms 延迟源于双击缩放（double-tap to zoom）的历史兼容逻辑，而事件委托本身不解决延迟，但可以和 touch 事件协同优化交互响应——关键在于用 touchstart 替代 click 触发逻辑，并通过事件委托统一管理目标元素，同时避免默认行为干扰。
用 touchstart 模拟即时点击，委托到父容器
在支持 touch 的设备上，touchstart 无延迟，且触发早于 click。可将原本绑定在子元素上的 click 逻辑，改由父容器监听 touchstart，再根据 event.target 判断具体目标：
- 给最外层容器（如 ul、section）绑定 touchstart 事件，而非每个按钮单独绑 click
- 在回调中用
event.target.closest('button, .item')定位真实操作元素，保证委托有效性 - 立即执行业务逻辑（如跳转、状态切换），无需等待 300ms
- 注意：touchstart 需配合
preventDefault()仅在必要时调用（例如自定义滚动或拖拽），普通点击场景通常不需要
主动禁用双击缩放，让原生 click 也变快
若项目允许禁用缩放，可在页面 <head> 中添加 viewport meta，使浏览器放弃双击判断逻辑，从而消除 click 延迟：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">此时原生 click 也会在约 0ms～50ms 内触发，事件委托 + click 即可直接使用，无需 touch 处理。但需权衡 UX：用户将无法双击放大内容。
立即学习“Java免费学习笔记（深入）”；
兼容处理：自动降级 + 防止重复触发
真实项目需兼顾 touch 设备、鼠标设备、甚至 hybrid 场景（如 Chrome DevTools 模拟移动设备时可能触发 mouse 事件）：
- 优先监听 touchstart；若不支持，则 fallback 到 click
- 为防止 touchstart 后 300ms 再触发 click 导致逻辑执行两次，可用标志位临时屏蔽：
let isTouching = false;<br>container.addEventListener('touchstart', e => {<br> isTouching = true;<br> handleAction(e.target);<br>});<br>container.addEventListener('click', e => {<br> if (!isTouching) handleAction(e.target);<br> isTouching = false;<br>});注意：该方案依赖 touchstart 和 click 的顺序稳定性（现代浏览器基本可靠），也可用 setTimeout(() => isTouching = false, 500) 更稳妥。
更轻量的替代方案：CSS 层面启用 fastclick 行为
无需手写逻辑，可通过 CSS 触发浏览器“快速点击”模式：
* { touch-action: manipulation; }该声明会告诉浏览器：“此区域只用于点击或滚动”，从而自动禁用双击缩放检测，使 click 事件即时触发。配合事件委托，代码零侵入，兼容性好（Chrome 36+、Safari 9.1+、Firefox 60+）。这是目前最推荐的基础优化手段。
