DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分！
CSS 中的 touch-action 属性使您可以控制触摸屏与元素交互的效果，类似于更广泛使用的 pointer-events 属性，用于控制鼠标交互。
#element {
touch-action: pan-right pinch-zoom;
}touch-action 属性主要用于需要根据使用设备类型略微不同的行为的交互式 UI 元素。 当您的用户可能期望一个元素在使用鼠标时以特定方式行为，而在触摸屏上以略微不同的方式行为时，touch-action 会派上用场。
最明显的例子是交互式地图元素。 如果你曾经查看过没有为触摸设备设计的 地图，你可能尝试过捏合缩放，却发现浏览器放大了元素，但实际上没有缩放实际的地图。
默认情况下，浏览器会自动处理触摸交互：捏合缩放、滑动滚动等。 将 touch-action 设置为 none 将禁用浏览器对这些事件的所有处理，将它们留给您实现（通过 JavaScript）。 如果您只想接管一个交互，请告诉浏览器处理其他所有交互。 例如，如果您编写了一些仅处理缩放的 JavaScript，您可以使用此属性告诉浏览器处理其他所有内容：touch-action: pan-x pan-y;。
查看 Pen touch-action 示例 由 CSS-Tricks (@css-tricks) 在 CodePen 上创建。
语法
touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation值
touch-action 属性接受以下值
auto：允许浏览器处理所有平移和缩放交互。none：禁用浏览器处理所有平移和缩放交互。 这为在 JavaScript 中自定义定义这些交互提供了可能性。pan-x：使用单指交互启用水平平移。 它是pan-left和pan-right值的简写，但可以与pan-y、pan-up、pan-down和pinch-zoom组合使用。pan-y使用单指交互启用垂直平移。 它是pan-up和pan-down值的简写，但可以与pan-x、pan-left、pan-right和pinch-zoom组合使用。manipulation：启用捏合和缩放交互，但禁用您可能在某些设备上发现的其他交互，例如双击缩放。 它是pan-x pan-y pinch-zoom组合的简写。pan-left（实验性）：当用户的手指向右移动时启用单指交互，这会向左平移。pan-right（实验性）：当用户的手指向左移动时启用单指交互，这会向右平移。pan-down（实验性）：当用户的手指向上移动时启用单指交互，这会向下平移。pan-up（实验性）：当用户的手指向下移动时启用单指交互，这会向上平移。pinch-zoom：启用多指交互，并且可以与任何其他pan-值组合使用。
相关
浏览器支持
这些浏览器支持数据来自 Caniuse，它提供了更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 36 | 52 | 10* | 12 | 不支持 |
移动设备/平板电脑
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 13.0-13.1 |
Safari 是对 touch-action 支持的明显遗漏。 iOs Safari 的支持有限，仅限于 auto 和 manipulation 值。
其他信息
- 指针事件级别 2 规范 – 该规范目前处于候选推荐状态，但打算在 2019 年初（截至本文撰写之时）移至提议推荐状态。 目标是该文档将成为正式的 W3C 推荐标准。
- MDN 文档
- Touch-action pinch-zoom CSS 属性示例 – Google Chrome 对其实现的演示。
- WebKit Bugzilla 票证 #133112 – 提议 Safari 支持的公开票证。 添加您的投票以将其提升。