touch-action: manipulation 必须直接作用于可交互元素（如button、a、带onclick的div），不能仅设在body上，因其不继承且易被子元素覆盖；需同时满足非表单控件、viewport未禁用缩放、无transform/opacity动画阻塞等条件才能消除300ms点击延迟。
touch-action: manipulation 为什么不能直接写在 body 上
写了 touch-action: manipulation 却发现点击还是有 300ms 延迟？大概率是因为它没生效——这个属性不会继承，body 上设了，子元素（尤其是按钮、链接）如果自己设置了 touch-action，就会覆盖掉。
- 必须作用于实际可交互的元素上，比如
<button></button>、<a></a>、带onclick的<div> <li>移动端 WebView（如 iOS Safari、微信内置浏览器）对 <code>manipulation的支持更严格：要求元素同时满足「非表单控件」「无user-scalable=no冲突」「未被 transform 或 opacity 动画阻塞」 - 如果用了
transform: translateZ(0)强制硬件加速，某些旧版 Android WebView 会意外禁用touch-action生效 -
user-scalable=no不等于touch-action: none；后者会彻底禁用所有触摸手势（包括滚动），导致页面卡死 - 安全组合是：
touch-action: manipulation（允许轻扫滚动 + 禁双击延迟） +viewport中保留user-scalable=yes（否则 iOS 15+ 会降级为pan-x pan-y） - 微信 iOS 客户端有个隐藏规则：如果
viewport里写了maximum-scale=1，即使touch-action正确，部分机型仍会强制加延迟 - Vue 模板中，别只写
<div style="touch-action: manipulation">，要确保 <code>handler绑定的目标节点本身有该样式 - React 中用
useEffect动态插入的按钮，得手动补el.style.touchAction = 'manipulation'，CSS-in-JS 库（如 Emotion）若没开启shouldForwardProp过滤，可能根本没把touch-action渲染到 DOM - 第三方 UI 组件（如 Ant Design Mobile）的
Button内部用了伪元素或 span 包裹文字，需额外加touch-action: manipulation到::after或子<span></span> - 在 Elements 面板选中目标元素 → Styles 标签页 → 搜索
touch-action，确认 computed 值是manipulation而不是auto或被inherit覆盖 - 真机测试时，快速连续双击页面空白处：如果页面没缩放，说明
user-scalable=no生效；但单击按钮仍有延迟，就是touch-action没落到正确节点 - iOS Safari 的 Web Inspector 不显示
touch-action计算值，此时只能靠排除法：删掉所有其他 touch 相关 CSS（比如-webkit-overflow-scrolling: touch），再逐个加回来定位冲突
“禁用缩放”和 touch-action 是两回事，别混着配
<meta name="viewport" content="width=device-width, user-scalable=no"> 只影响双指缩放行为，跟单击延迟完全无关。真正决定点击是否延迟的，是浏览器是否进入“等待双击缩放判定”的状态——而这由 touch-action 控制。
React/Vue 项目里动态添加 touch-action 容易漏掉这些节点
框架组件常把事件绑定在 wrapper div 上，而真实可点区域（比如图标、文字）是子元素。如果只给父组件加 touch-action，子节点默认仍是 auto，延迟照旧。
调试时怎么看 touch-action 到底生效没
Chrome DevTools 的 Rendering 面板里勾选 “Paint flashing” 没用——它不反映 touch-action 状态。真要看，得靠触发后的行为反馈和开发者工具里的 computed 样式链。
立即学习“前端免费学习笔记（深入）”；
