touch-action不是让触摸生效的开关，而是限制或放开浏览器默认触摸响应的策略开关；典型场景是自研手势库或Canvas/WebGL交互，需用none禁用默认行为并手动接管事件。
touch-action 是 CSS 中控制元素触摸行为的属性，直接决定用户在该元素上滑动、缩放、双击等手势是否被浏览器默认处理。它不是“让触摸生效”的开关，而是“限制或放开默认触摸响应”的策略开关——多数情况下，你加了 touch-action: none 却发现手势完全失灵，问题往往出在没理解它的拦截逻辑。
什么时候必须用 touch-action？
典型场景是自研手势库（比如用 pointerdown/pointermove 实现拖拽、旋转、双指缩放），或者 Canvas/WebGL 交互区域。浏览器默认会对某些元素（如 <div>）启用滚动、 pinch-zoom 等行为，会和你的 JS 手势冲突，导致：
<ul>
<li>手指一滑，页面跟着滚动，你的拖拽没响应</li>
<li>双指张开，页面放大，你的缩放逻辑被跳过</li>
<li>快速双击触发 zoom，而不是你的 click 处理</li>
</ul>
<p>这时需要显式声明 <code>touch-action 来“让出”或“接管”控制权。
touch-action 的常用值和实际效果
值不是越多越好，关键看你要禁什么、留什么：
立即学习“前端免费学习笔记（深入）”；
-
touch-action: none：彻底禁用所有默认触摸行为（滚动、缩放、双击）。JS 必须自己处理全部pointer事件，否则元素对触摸“无反应” -
touch-action: pan-x：只允许水平滚动（比如轮播图容器），垂直滑动会被阻止，缩放/双击也被禁 -
touch-action: pan-y pinch-zoom：允许竖直滚动 + 双指缩放，但禁掉水平滚动和双击放大 -
touch-action: manipulation：快捷写法，等价于pan-x pan-y pinch-zoom，适合大多数需要滚动+缩放但不希望双击触发 zoom 的 UI 区域
注意：auto（默认值）在可滚动元素上会自动启用对应方向的 pan，但不可预测；inherit/initial 很少用，容易引发继承混乱。
为什么加了 touch-action: none 还收不到 pointermove？
这不是 CSS 问题，而是浏览器的 pointer event 捕获机制：当 touch-action 把所有行为都禁掉后，某些 Android Chrome 版本（尤其是 115 之前）会延迟派发 pointermove，直到你主动调用 event.preventDefault() —— 但现代规范已不推荐在 pointermove 里频繁 preventDefault，容易卡顿。
- 正确做法：在
pointerdown阶段就调用event.preventDefault()，告诉浏览器“我要接管”，后续pointermove才能稳定触发 - 更稳妥的写法是加
touch-action: none+user-select: none（防误选文字）+-webkit-user-drag: none（防拖拽图片） - 如果只监听
touchstart/touchmove，记得也要加event.preventDefault()，否则 iOS Safari 会忽略后续 touch 事件
兼容性和移动端真机调试要点
touch-action 在 Chrome/Firefox/Edge/Safari（iOS 13.4+、macOS 10.15.4+）均支持，但老版本 iOS Safari 对 pinch-zoom 支持不稳定，且仅对 或可滚动容器生效。
- 测试时务必用真机：模拟器常忽略
touch-action行为 - 不要在
或上设touch-action: none，会导致整个页面无法滚动 - 若用 React/Vue，确保样式是 inline 或 scoped，避免被全局 CSS 覆盖（比如重置库把
touch-action设回auto）
最易被忽略的一点：touch-action 是逐元素生效的，父容器设了 none，子元素不会继承；子元素想单独响应缩放，必须自己设 pinch-zoom，且不能被父级的 none 拦截——这要求 DOM 结构和事件委托逻辑必须对齐。
