touch-action: manipulation 不能单独解决300ms延迟，仅在无user-scalable=no、非iframe、浏览器支持（chrome≥36等）时绕过双击判断以加快click；需与viewport协同，且android旧webview兼容性差，兜底应使用touchend+防误触。
touch-action: manipulation 能解决点透，但不能单独解决 300ms 延迟；它只在部分场景下有效，且依赖浏览器支持程度。
touch-action: manipulation 的真实作用范围
这个 CSS 属性不是用来“消除 click 延迟”的，而是告诉浏览器：“这个元素只做平移（滚动）和双指缩放，不需要等 300ms 来判断是否双击”。因此它能绕过双击缩放等待逻辑，间接让 click 更快触发——但仅限于满足以下全部条件的元素：
- 该元素没有
user-scalable=no等 viewport 限制（否则 touch-action 会被忽略） - 该元素不处于 iframe 或 sandbox 环境中
- 浏览器支持该值：Chrome ≥ 36、Firefox ≥ 64、Safari ≥ 13.1、Edge ≥ 79；iOS Safari
- 该元素本身没绑定
touchstart/touchend（否则浏览器会退回到兼容模式，重新启用 300ms 判断）
为什么加了 touch-action 还是点透？
点透的本质是 touchend 后隐藏遮罩层 → 300ms 后触发 click → 此时遮罩已消失 → click 落到下层元素。而 touch-action: manipulation 并不阻止 click 事件本身，也不改变事件冒泡路径或延迟时间，它只是让浏览器“更愿意”提前派发 click ——但前提是：上层元素没被 JS 主动移除/隐藏。
常见错误写法：
.mask {
touch-action: manipulation;
}
.mask.active {
display: none; /* 触发点透：display 变更后，click 仍按原坐标下发 */
}
正确做法是配合事件时机控制，例如：
- 用
visibility: hidden+pointer-events: none替代display: none - 在
touchend中不立即隐藏，而是setTimeout(() => { el.style.display = 'none' }, 350) - 对下层可点击元素临时加
pointer-events: none，350ms 后恢复
touch-action 和 viewport 配置的协作关系
touch-action 不是 viewport 的替代品，二者定位不同：
-
<meta name="viewport" content="width=device-width, user-scalable=no">是全局禁用缩放，强制关闭双击逻辑，所有元素都受益，兼容性更好（连 iOS 9 都支持） -
touch-action: manipulation是局部声明，允许缩放但禁止双击，保留 pinch-zoom，更适合地图、图表类组件
两者可共存，但注意冲突点：
- 若 viewport 已设
user-scalable=no，再加touch-action: manipulation没额外收益 - 若 viewport 允许缩放（
user-scalable=yes），但某按钮想跳过 300ms，则必须加touch-action: manipulation，且不能给它绑touchstart
真正要警惕的兼容盲区
Android WebView（尤其旧版 Crosswalk、腾讯 X5）和部分国产浏览器内核对 touch-action 支持极差，即使写了也无效。上线前务必实机测试：
- 在 Android 5–7 的微信内置浏览器中检查是否仍有延迟
- 用 Chrome DevTools 的 “Rendering > Paint flashing” 查看 touch 区域是否被标记为“non-manipulable”
- 不要依赖
getComputedStyle(el).touchAction判断生效，它返回字符串但不反映实际行为
最稳妥的兜底方案仍是：关键交互区域统一用 touchend + 手动防误触（记录位移+时间阈值），而非寄望于单个 CSS 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
