MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

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 typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

By default, panning (scrolling) and pinching gestures are handled exclusively by the browser. An application using Pointer_events will receive a pointercancel event when the browser starts handling a touch gesture. By explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in pointermove and pointerup listeners for the remaining gestures. Applications using Touch_events disable the browser handling of gestures by calling preventDefault(), but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked.

When a gesture is started, the browser intersects the touch-action values of the touched element and all its ancestors up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, touch-action is typically applied only to individual elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element's descendants. After a gesture has started, changes to touch-action values will not have any impact on the behavior of the current gesture.

语法

The touch-action property may be specified as either:

auto
当触控事件发生在元素上时,由浏览器来决定进行哪些操作,比如对viewport进行平滑、缩放等。
none
当触控事件发生在元素上时,不进行任何操作。
pan-x
如果当前元素最近的父元素可以横向滚动时,浏览器只允许在该父元素上进行横向滚动。
pan-y
如果当前元素最近的父元素可以纵向滚动时,浏览器只允许在该父元素上进行纵向滚动。
manipulation
浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持的行为不被支持。Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. This is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid).
pan-leftpan-right,pan-up,pan-down 
Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, "pan-left pan-right" is invalid since "pan-x" is simpler, but "pan-left pan-down" is valid).
pinch-zoom
Enable multi-finger panning and zooming of the page. This may be combined with any of the pan- values.

正式语法

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

示例

The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface. 

#map {
  touch-action: none;
}

Another common pattern is that of an image carousel which uses pointer events to handle horizontal panning, but doesn't want to interfere with vertical scrolling or zooming of the document.

.image-carousel {
  width: 100%;
  height: 150px;
  touch-action: pan-y pinch-zoom;
}

touch-action is also often used to completely disable the delay of click events caused by support for the double-tap to zoom gesture.

html {
  touch-action: manipulation;
}

Specifications

Specification Status Comment
Pointer Events
touch-action
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 36.0 (Yes) 52.0 (52.0)[1] 10.0-ms[2]
11.0
23 未实现[4]
pan-uppan-downpan-leftpan-right 55.0 未实现 未实现[5] ? 42 未实现[4]
pinch-zoom 56.0 (Yes) 未实现[5] 10.0-ms[2]
11.0
43 未实现[4]
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 36.0 36.0 (Yes) 52.0 (52.0)[1] (Yes) (Yes) 9.1 [3]
pan-uppan-downpan-leftpan-right 55.0 55.0 未实现 未实现[5] 未实现 42 未实现
pinch-zoom 56.0 56.0 (Yes) 未实现[5] ? 43 未实现

[1] This property (Level 1 keywords only) is implemented since Firefox 29, but is hidden behind the layout.css.touch_action.enabled preference. Starting in Firefox Nightly 50, it is enabled by default when running in nightly builds only. It is currently on track to be released in Firefox 52, see bug 1244402.

[2] IE10+ additionally supports the non-standard values pinch-zoom, double-tap-zoom, cross-slide-x and cross-slide-y.

[3] Only supports the manipulation and auto values in iOS.

[4] See WebKit bug 133112.

[5] See bug 1285685.

相关链接

文档标签和贡献者

 此页面的贡献者: Ende93, teoli, TooBug
 最后编辑者: Ende93,