touch-action属性可显著提升移动端触摸响应，需根据交互需求合理设置：none禁用全部手势，manipulation保留点击与滚动，pan-x/pan-y限定单向滚动，避免误设导致无法滚动或点击失效。
用 touch-action 属性能显著提升移动端触摸响应的准确性和流畅度，关键在于明确告诉浏览器哪些默认手势行为需要禁用或保留，避免因误判导致的延迟、卡顿或冲突。
明确禁止不需要的手势以提升响应速度
当元素只支持点击（如按钮）或自定义拖拽（如轮播图滑动），应禁用浏览器默认的平移、缩放等行为。否则浏览器会等待一段时间判断用户意图，造成点击延迟（约 300ms）。
-
touch-action: none：完全禁用所有原生手势，适合全自定义交互（如画板、游戏区域） -
touch-action: manipulation：禁用双指缩放和滚动，但保留单指点击与滚动，是按钮、卡片类组件的推荐值 -
touch-action: pan-x或pan-y：仅允许横向或纵向滚动，适用于轮播图、时间轴等单向滑动容器
避免在可滚动容器上误设 touch-action
给 <div style="overflow: auto"> 这类容器设置 <code>touch-action: none 会导致无法滚动；若需保留滚动又禁用缩放，应使用 touch-action: pan-x pan-y pinch-zoom（注意：pinch-zoom 是禁用缩放，不是启用）。
常见错误写法：touch-action: pinch-zoom 单独使用——这会同时禁用所有平移，页面直接变“点不动”。正确做法是显式声明允许的平移方向。
与 CSS transform 和 pointer-events 配合使用
touch-action 本身不控制点击穿透或视觉反馈，需结合其他属性：
- 在
position: fixed的蒙层上，除了touch-action: none，还建议加pointer-events: none（如果不需要交互）或pointer-events: auto（如果要响应点击） - 对使用
transform: translateX()实现的滑动组件，设touch-action: pan-x可让浏览器提前启用合成层优化，减少重排重绘
注意浏览器兼容性与降级处理
Chrome、Firefox、Safari（iOS 9.2+ / macOS 10.12+）及 Android WebView 均支持 touch-action。旧版 iOS Safari 不识别该属性，但也不会报错，因此无需 JavaScript 检测。
不推荐为兼容旧设备而放弃使用——现代移动 Web 应用基本可安全启用。若需精细控制，可在初始化时用 CSS.supports('touch-action', 'pan-x') 判断，但实际项目中极少需要。
