touch-action属性

CSS属性 touch-action 用于指定某个给定的区域是否容许用户操做，以及如何响应用户操做（好比浏览器自带的划动、缩放等）。

/* 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: unset;

初始值	auto
适用元素	all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups
是不是继承属性	否
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

默认状况下，平移（滚动）和缩放手势由浏览器专门处理。 使用  Pointer_events 的应用程序将在浏览器开始处理触摸手势时收到一个  pointercancel 事件。 经过明确指定浏览器应该处理哪些手势，应用程序能够在  pointermove 和  pointerup 监听器中为其他的手势提供本身的行为。 使用  Touch_events 的应用程序经过调用  preventDefault() 禁用浏览器处理手势，但也应使用触摸操做确保浏览器在调用任何事件侦听器以前，了解应用程序的意图。

当手势开始时，浏览器与触摸的元素及其全部祖先的触摸动做值相交直到一个实现手势（换句话说，第一个包含滚动元素）的触摸动做值。 这意味着在实践中，触摸动做一般仅适用于具备某些自定义行为的单个元素，而无需在该元素的任何后代上明确指定触摸动做。 手势开始以后，触摸动做值的更改将不会对当前手势的行为产生任何影响。

Link to section语法

touch-action 属性能够被指定为:

• 任何一个关键字  auto、 none、 manipulation，或
• 零或任何一个关键字  pan-x、 pan-left、 pan-right，加零或任何一个关键字  pan-y、 pan-up、 pan-down，加可选关键字  pinch-zoom.

Link to section值

auto

当触控事件发生在元素上时，由浏览器来决定进行哪些操做，好比对viewport进行平滑、缩放等。

none

当触控事件发生在元素上时，不进行任何操做。

pan-x

启用单指水平平移手势。能够与 pan-y 、pan-up、pan-down 和／或 pinch-zoom 组合使用。

pan-y

启用单指垂直平移手势。能够与 pan-x 、pan-left 、pan-right 和／或 pinch-zoom 组合使用。

manipulation

浏览器只容许进行滚动和持续缩放操做。任何其它被auto值支持的行为不被支持。启用平移和缩小缩放手势，但禁用其余非标准手势，例如双击以进行缩放。 禁用双击可缩放功能可减小浏览器在用户点击屏幕时延迟生成点击事件的须要。 这是“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

启用多手指平移和缩放页面。 这能够与任何平移值组合。

Link to section正式语法

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

Link to section示例

最多见的用法是禁用元素（及其不可滚动的后代）上的全部手势，以使用本身提供的拖放和缩放行为（如地图或游戏表面）。

#map {

touch-action: none;}

另外一种常见的模式是使用指针事件处理水平平移的图像轮播，但不想干扰网页的垂直滚动或缩放。

.image-carousel {

width: 100%;

height: 150px;

touch-action: pan-y pinch-zoom;}

触摸动做也常常用于彻底解决由支持双击缩放手势引发的点击事件的延迟。

html {

touch-action: manipulation;

}