touch-action

Baseline 广泛可用 *

此功能已成熟，并可在多种设备和浏览器版本上使用。自 2019 年 9 月以来，它已在各种浏览器中可用。

* 此特性的某些部分可能存在不同级别的支持。

touch-action CSS 属性设置触摸屏用户如何操作元素的区域（例如，通过浏览器内置的缩放功能）。

默认情况下，平移（滚动）和捏合手势由浏览器独占处理。使用指针事件的应用程序将在浏览器开始处理触摸手势时收到 pointercancel 事件。通过明确指定哪些手势应由浏览器处理，应用程序可以在 pointermove 和 pointerup 监听器中提供其余手势的自身行为。使用触摸事件的应用程序通过调用 preventDefault() 禁用浏览器对手势的处理，但也应使用 touch-action 以确保浏览器在调用任何事件监听器之前了解应用程序的意图。

当手势开始时，浏览器会交叉触控元素及其祖先的 touch-action 值，直到实现该手势的元素（换句话说，是第一个包含可滚动元素）。这意味着在实践中，touch-action 通常仅应用于具有某些自定义行为的顶级元素，而无需在其任何后代上明确指定 touch-action。

注意：手势开始后，对 touch-action 的更改不会对手势的当前行为产生任何影响。

语法

css

/* Keyword values */
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;

/* Global values */
touch-action: inherit;
touch-action: initial;
touch-action: revert;
touch-action: revert-layer;
touch-action: unset;

touch-action 属性可以指定为：

关键字 auto、none、manipulation 之一，或
关键字 pan-x、pan-left、pan-right 之一和/或关键字 pan-y、pan-up、pan-down 之一，以及可选的关键字 pinch-zoom。

值

auto: 启用浏览器处理所有平移和缩放手势。
none: 禁用浏览器处理所有平移和缩放手势。
pan-x: 启用单指水平平移手势。可与 pan-y、pan-up、pan-down 和/或 pinch-zoom 结合使用。
pan-y: 启用单指垂直平移手势。可与 pan-x、pan-left、pan-right 和/或 pinch-zoom 结合使用。
manipulation: 启用平移和捏合缩放手势，但禁用其他非标准手势，例如双击缩放。禁用双击缩放消除了浏览器在用户轻触屏幕时延迟生成点击事件的需要。这是“pan-x pan-y pinch-zoom”的别名（出于兼容性考虑，它本身仍然有效）。
pan-left, pan-right, pan-up, pan-down: 启用以给定方向开始滚动的单指手势。一旦滚动开始，方向仍然可以反转。请注意，“向上”滚动 (pan-up) 意味着用户在屏幕表面向下拖动手指，同样 pan-left 意味着用户向右拖动手指。多个方向可以组合，除非有更简单的表示（例如，“pan-left pan-right”是无效的，因为“pan-x”更简单，但“pan-left pan-down”是有效的）。
pinch-zoom: 启用页面的多指平移和缩放。这可以与任何 pan- 值结合使用。

无障碍

声明 touch-action: none; 可能会抑制浏览器缩放功能的操作。这将阻止有低视力的人阅读和理解页面内容。

正式定义

初始值	`auto`
应用于	所有元素，除了：非替换的行内元素、表格行、行组、表格列和列组
继承性	否
计算值	同指定值
动画类型	不可动画化

正式语法

touch-action = 
  auto                                                |
  none                                                |
  [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ]  |
  manipulation

示例

禁用所有手势

最常见的用法是禁用元素（及其不可滚动后代）上的所有手势，该元素提供自己的拖动和缩放行为——例如地图或游戏界面。

HTML

html

<div id="map"></div>

CSS

css

#map {
  height: 150vh;
  width: 70vw;
  background: linear-gradient(blue, green);
  touch-action: none;
}

结果

规范

规范
兼容性 # touch-action
指针事件 # the-touch-action-css-property

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者在 2025 年 7 月 14 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题