加 touch-action: manipulation 能直接消除300ms点击延迟，但仅对被浏览器识别为可点击的元素生效，须手动加在目标元素上（如自定义按钮、Tab标签、关闭按钮），不继承；原生按钮默认优化，但重写display或覆盖touch-action时需补回；轮播容器、地图等手势区域禁用该属性，否则阻断滚动。
加 touch-action: manipulation 能直接砍掉 300ms 点击延迟，但只对“被浏览器识别为可点击”的元素生效，且必须手动加在目标元素上，父级设了子级不会继承。
哪些元素必须加 touch-action: manipulation
这个属性不生效，往往是因为加错了地方。它只在触发原生 click 的上下文中起作用，不是“写了就快”。
-
<button>、<a>、<input type="button">这类原生可点击元素默认已优化，但如果你重写了display（比如改成inline-block）或显式设置了touch-action: auto，就得手动补回 - 所有用
onclick、@click、onClick绑定的自定义容器——比如<div class="btn">、<li class="card">——必须单独加，不能靠父容器兜底 - 轮播图指示点、Tab 标签、弹层关闭按钮、开关控件这类高频点击区，优先加；但轮播外层容器、地图
<div id="map">、横向滚动列表不能加，否则会禁用滚动
为什么加了还是有延迟？常见失效原因
不是语法写错，而是运行时被覆盖或语义缺失。
- 父容器设置了
touch-action: none或auto（比如某些 UI 框架的.modal、.drawer），子元素的manipulation会被压制——touch-action不支持子级覆盖父级 - CSS 权重不够：第三方样式里写了
* { touch-action: auto }，你的声明直接被干掉；用 DevTools 的 Computed 面板确认最终值是不是manipulation - 元素没交互语义：纯
<div>即使加了该属性，iOS Safari 仍可能不加速，得配role="button"和tabindex="0" - 监听了
touchstart且调用了preventDefault()：部分浏览器检测到 JS 干预后，会自动降级回 300ms 判定；若必须监听，记得传{ passive: true }
如何验证是否真正生效
别信模拟器，真机测最准；延迟消失后，视觉反馈也得跟上。
立即学习“前端免费学习笔记（深入）”；
- 在 Safari 或 Chrome 真机调试中打开 Elements 面板，选中按钮，看 Computed 样式里
touch-action是否为manipulation - 长按按钮约 200ms 后松开，如果
click立即执行（比如弹窗秒出、路由瞬跳），说明生效；如果仍有明显“停顿感”，大概率是 JS 层拦截了事件流 - 配合
:active使用时，要确保元素尺寸 ≥ 48×48px（加padding或min-width/min-height），否则 iOS Safari 可能根本不触发:active状态 - 对使用
transform或position: fixed的按钮，部分 Android WebView 会忽略该声明，需额外补上
最容易被忽略的是语义和尺寸——touch-action: manipulation 不是魔法开关，它依赖浏览器对“可点击区域”的识别逻辑。没 role、没 tabindex、太小、被父级压制，都会让它形同虚设。
