touch-action: manipulation能跳过300ms延迟，因为它向浏览器声明该元素仅支持单指滚动和双指缩放，禁止双击缩放，从而取消等待判断，使click立即触发；仅对绑定click或有onclick的元素生效，不支持ie，需现代浏览器兼容。
响应式设计必须关注触屏延迟，因为300ms不是“卡顿”，而是浏览器在等用户双击缩放——哪怕你的页面根本不需要缩放，这个等待也照常发生。
touch-action: manipulation 为什么能跳过300ms
移动端浏览器收到 touchend 后，默认会停顿约300ms，判断是否还有第二次触摸（即双击缩放）。touch-action: manipulation 的作用是向浏览器明确声明：“这个元素只允许单指滚动（pan-x/pan-y）和双指缩放（pinch-zoom），禁止双击缩放、禁止长按菜单”。浏览器拿到这个指令，就不再等待，click 立即触发。
它不是“加速”事件，而是“取消等待”。所以效果立竿见影，且不依赖JavaScript。
- 仅对绑定了
click或有onclick的元素生效；纯touchstart监听无效 - 等价于
pan-x pan-y pinch-zoom，不影响滚动和图表缩放 - 不支持 IE，Safari 需 iOS 10+ / macOS 10.12+，Chrome ≥ 36，Firefox ≥ 64
- 若父元素设了
touch-action: none，子元素的manipulation会被覆盖失效
哪些元素该加，哪些不该加
加，是为了让点击行为“意图明确”；乱加，反而破坏交互逻辑。
- 必须加：
.btn、.nav-link、[role="button"]、轮播箭头、Tab 切换项、卡片容器（带onclick或路由跳转） - 不必加：
<button></button>、<a href></a>、<input type="submit">等原生可点击元素——它们默认已启用优化 - 严禁加：
body、.scroll-container、地图画布、图表容器（除非你确认要禁用双击缩放） - 特别注意：轮播图外层容器（需横向滑动）不能加，但左右箭头按钮可以加
加了还是延迟？常见失效场景
写了 touch-action: manipulation 却没效果，大概率掉进了这几个坑：
-
viewport里写了user-scalable=no，但同时又在 iframe 里使用该元素 → 大部分 WebView 会忽略touch-action - 元素在
touchend中被 JS 瞬间移除或设为display: none→ 点透（click 落到下层）仍会发生，touch-action不改变事件冒泡路径 - 监听了
touchstart并调用了event.preventDefault()，却没配{ passive: false }→ 浏览器降级回兼容模式，重新启用300ms等待 - CSS 层叠冲突：比如重置了
button的display: inline-block后忘了补回touch-action，导致原生优化失效
别只靠 touch-action，配套动作不能少
touch-action: manipulation 解决的是“事件派发时机”，但用户感知还取决于视觉反馈和焦点管理。
- 必须同步定义
:active和:focus样式，否则 iPad 上键盘用户点按无反馈 - 推荐用
:focus-visible区分鼠标/触摸/键盘焦点，避免:hover在手机上失效 - 遮罩层关闭时，优先用
visibility: hidden; pointer-events: none替代display: none，防止点透 - 真机验证比模拟器可靠：Chrome DevTools Sensors 面板开启 “Emulate touch”，再看 computed 样式中
touch-action是否为manipulation
真正容易被忽略的，是那个“父元素设了 none 就全白搭”的层叠规则——它不报错、不警告，只默默让所有子元素的 manipulation 归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
