MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

touch-action

В процессе перевода.

Css-свойство touch-action указывает будет ли  данная область взаимодействовать с пользователем через тачскрин и если будет, то каким образом(например, будет ли применено панорамонирование(panning)  или приближение(zooming) - возможности, которые встроенны в браузер).

/* 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
Применяется квсе элементы, кроме: незаменяемых строчных элементов, строк и колонок таблиц
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

По умолчанию, панорамирующие, прокручивающие и сужающие жесты обрабатываются исключительно только браузером. Приложение, использующие Pointer_events получит pointercancel событие, когда браузер начнет обрабатывать тач жест. Явно указывая какие жесты должны обрабатываться браузером, приложение может иметь свое поведение для оставшихся жестов благодаря прослушиванию событий pointermove и pointerup. 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.

Syntax

The touch-action property may be specified as either:

Values

auto
Enable browser handling of all panning and zooming gestures.
none
Disable browser handling of all panning and zooming gestures.
pan-x
Enable single-finger horizontal panning gestures. May be combined with pan-y, pan-up, pan-down and/or pinch-zoom.
pan-y
Enable single-finger vertical panning gestures. May be combined with pan-x, pan-left, pan-right and/or pinch-zoom.
manipulation
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-left, pan-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.

Formal syntax

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

Examples

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
Web Compatibility Standard
Определение 'touch-action' в этой спецификации.
Живой стандарт Added pinch-zoom property value.
Pointer Events – Level 2
Определение 'touch-action' в этой спецификации.
Редакторский черновик Added pan-left, pan-right, pan-up, pan-down property values.
Pointer Events
Определение 'touch-action' в этой спецификации.
Рекомендация Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 36.0 (Да) 52.0 (52.0)[1] 10.0-ms[2]
11.0
23 Нет[4]
pan-up, pan-down, pan-left, pan-right 55.0 Нет Нет[5] ? 42 Нет[4]
pinch-zoom 56.0 (Да) Нет[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 (Да) 52.0 (52.0)[1] (Да) (Да) 9.1 [3]
pan-up, pan-down, pan-left, pan-right 55.0 55.0 Нет Нет[5] Нет 42 Нет
pinch-zoom 56.0 56.0 (Да) Нет[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 баг 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 133112.

[5] See баг 1285685.

See also

Метки документа и участники

 Внесли вклад в эту страницу: SergeyZubkov
 Обновлялась последний раз: SergeyZubkov,