必须为按钮类元素（<button>、、带onclick的<div>）显式设置touch-action: manipulation，继承无效；fixed或transform元素需单独补设；父容器touch-action: auto、CSS优先级覆盖、无交互语义或低版本WebView均会导致失效。
直接用 touch-action: manipulation 就能绕过 300ms 延迟，但只对「可点击区域」生效，且不能解决点击穿透。
哪些元素必须加 touch-action: manipulation？
不是全局加一次就完事。浏览器只在触发 click 的上下文中检查该属性，所以：
- 按钮类元素（
<button>、<a href>、带onclick的<div>）必须显式设置，继承无效 -
html或body上设touch-action: manipulation只影响默认行为区域，不保证子元素都响应更快 - 如果元素用了
position: fixed或transform，部分 Android WebView 会忽略该声明，需单独补上
为什么写了却没效果？常见失效场景
这个属性看起来简单，但实际容易被覆盖或忽略：
- 父容器设置了
touch-action: auto（比如某些 UI 框架的 modal、drawer），会阻断子元素的manipulation行为 - CSS 优先级被覆盖：例如第三方样式表里写了
* { touch-action: auto }，就会把你的设置干掉 - 元素没有明确的交互语义：纯
<span>或<div>即使加了该属性，iOS Safari 仍可能不加速，得配合cursor: pointer或role="button" - 某些安卓低版本 WebView（如 Android 4.4 内置）根本不支持该属性，查
getComputedStyle(el).touchAction返回空字符串就是未生效
touch-action: manipulation 和 viewport 禁缩放的关系
两者目标一致，但作用机制不同，不能互相替代：
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport" content="user-scalable=no">是告诉浏览器“别等双击”，从而全局禁掉延迟；但它强制禁用缩放，体验一刀切 -
touch-action: manipulation是告诉浏览器“这个区域只允许平移和缩放手势，别等双击”，更精细，且不影响页面其他区域的缩放能力 - 实际项目中建议组合使用：
viewport控制整体行为，touch-action用于关键操作区（如底部导航、悬浮按钮），避免误触或滑动冲突
真正容易被忽略的是：这个属性只影响「原生手势识别阶段」，它不改变事件流顺序，也不阻止 click 后续的穿透问题。如果你在弹层上点按钮，背后元素仍被触发，那得靠 pointer-events: none 或 z-index 隔离，而不是指望 touch-action。
