touch-action: none 会禁用默认行为并阻止 pointerdown/touchstart 触发，需同步设置 passive: false、调用 preventDefault() 并添加 user-select: none 等防护；pan-x/pan-y 默认禁缩放，需显式加 pinch-zoom；manipulation 不适用于 Canvas；overflow 容器禁用 none；touch-action 不继承。
touch-action: none 为什么点了没反应
加了 touch-action: none 却收不到 pointerdown 或 touchstart，不是 CSS 写错了，而是浏览器在禁用所有默认行为后，对事件派发更谨慎：部分 Android Chrome（115 之前）会延迟触发 pointermove，甚至跳过首次 pointerdown，除非你明确“接管意图”。
必须同步做三件事：
- 在绑定事件时传入
{ passive: false }（尤其对touchmove和pointermove） - 在
pointerdown或touchstart回调第一行就调用event.preventDefault() - 额外加
user-select: none和-webkit-user-drag: none，防文字选中和图片拖拽干扰
pan-x 和 pan-y 混用时缩放失效了？
touch-action: pan-x pan-y 允许双向滚动，但**默认禁用所有缩放和双击**——这不是 bug，是规范行为。很多人误以为它“保留缩放”，其实 pinch-zoom 必须显式声明。
正确组合示例：
立即学习“前端免费学习笔记（深入）”；
- 只允许竖直滚动 + 双指缩放：
touch-action: pan-y pinch-zoom - 轮播图容器（仅水平滑动 + 禁双击放大）：
touch-action: pan-x - 地图类区域（全向拖拽 + 缩放）：
touch-action: pan-x pan-y pinch-zoom
单独写 touch-action: pinch-zoom 是危险操作：它会禁掉所有平移，导致元素完全无法拖动或滚动。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
manipulation 值适合按钮但不适用于 Canvas
touch-action: manipulation 是快捷写法，等价于 pan-x pan-y pinch-zoom，但它隐含一个关键限制：**禁用双击 zoom，但保留单点 tap 的 300ms 延迟兼容逻辑**。这对按钮、卡片类点击组件友好，能避免误触滚动。
但 Canvas/WebGL 区域需要零延迟响应，且常需完整手势控制权：
- 用
manipulation会导致双指缩放生效，但你的 JS 缩放逻辑可能被截断 - Canvas 上的拖拽若混用
manipulation和pointermove，容易出现“手指一动页面先滚一下”的冲突 - 真正需要自定义手势时，应直接用
none+ 手动处理全部 pointer 事件
overflow: auto 容器千万别设 touch-action: none
给带 overflow: auto 或 scroll 的 <div> 加 touch-action: none，等于主动废掉原生滚动能力——用户滑动不会触发滚动条，也不会触发你的事件（因为没 preventDefault，也没接管逻辑）。
如果目标是“保留滚动，但禁掉缩放或双击”，请按需组合：
- 可滚动列表（禁缩放/双击）：
touch-action: pan-y - 横向时间轴（禁垂直滚动）：
touch-action: pan-x - 图文混排区域（允许滚动+缩放，但防误双击）：
touch-action: pan-x pan-y pinch-zoom
最易忽略的一点：touch-action 不继承，父元素设了不影响子元素；但子元素设了 none，会阻止事件冒泡到父级滚动容器——这意味着嵌套滚动时，必须逐层检查作用域。
