touch-action: manipulation能消除300ms延迟，因为它告知浏览器该元素无需双击缩放判定，跳过等待直接触发click，等价于pan-x pan-y pinch-zoom，保留滚动缩放但禁用double-tap-zoom和长按菜单。
直接加 touch-action: manipulation 就能解决，但必须加对地方——加错反而让滚动失效或缩放失灵。
为什么 touch-action: manipulation 能砍掉 300ms 延迟
浏览器不是“慢”，是在等你双击。iOS Safari 和部分 Android WebView 收到 touchend 后，会卡住约 300ms，看你会不会立刻点第二下（触发 double-tap zoom）。touch-action: manipulation 的作用是告诉浏览器：“这个元素只允许单指平移（滚动）和双指缩放（pinch-zoom），不需要判断双击”，于是它跳过等待，click 立刻触发。
它等价于 pan-x pan-y pinch-zoom，保留滚动和缩放能力，仅禁用 double-tap-zoom 和长按菜单（如“复制”“翻译”），所以既快又不破坏基础交互。
- 不是加速
click，而是绕过双击判定逻辑 - 不影响事件冒泡、不修复点击穿透、不加快
touchstart - 只对绑定了
click或有交互语义的元素生效（比如<button></button>、<a></a>、div[role="button"]）
touch-action: manipulation 应该加在哪些元素上
加的位置比加不加更重要。加对了，延迟消失；加错了，用户滑不动页面、图片点不开缩放。
- 应该加：
.btn、.nav-item、轮播图左右箭头、开关容器、弹窗确认按钮、[data-action]类型的自定义点击区域 - 千万不能加：
.list外层容器、轮播图主容器（需要横向拖拽）、地图<div id="map">、PDF 查看器、图表容器——这些都需要原生手势支持<li>禁止全局写 <code>* { touch-action: manipulation; }或body { touch-action: manipulation; }，否则整页无法双击缩放，影响可访问性 - 父元素设了
touch-action: manipulation，子元素不会继承——按钮在弹窗里？得单独给按钮加 - 如果元素同时监听
touchstart并调用了e.preventDefault()，部分安卓 WebView 会自动降级回 300ms 行为 - 用了
position: fixed或transform的按钮，在某些旧版 Android WebView 中该属性可能被忽略，得额外补一条样式 - 浏览器支持没问题：Chrome ≥ 36、Safari ≥ 9.1、Firefox ≥ 52、Edge ≥ 79；但 iOS Safari 9.3 以下不支持，需查项目最低兼容版本
- viewport 里写了
user-scalable=no会导致touch-action被忽略——这是硬性限制，不是 bug
容易踩的坑和兼容性注意点
这个属性看着简单，实际部署时几个细节一错，就白配了。
真正麻烦的不是加不加这行 CSS，而是判断哪个容器该加、哪个不该加。一个按钮加了有效，它外面包着的卡片容器如果也加了，就可能让卡片内列表滑不动——这种干扰往往要真机测试才能暴露。
