touch-action

**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

启用平移和捏合缩放手势，但禁用其他非标准手势，例如双击缩放。禁用双击缩放消除了浏览器在用户点击屏幕时延迟生成 **click** 事件的需要。这是“**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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅