Css-свойство touch-action указывает как элемент будет управляться через тачскрин (например, при помощи возможности приближения (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;

По умолчанию, жесты панорамирование, прокрутка и сужающий обрабатываются исключительно браузером. Приложение, использующиеPointer events получит событиеpointercancel, когда браузер начнёт обрабатывать тач жест. Явно указывая жесты обрабатываемые браузером, приложение может иметь своё поведение для оставшихся жестов благодаря прослушиванию событийpointermove иpointerup. Приложения, использующиеTouch events, отключают обработку жестов браузером вызовомpreventDefault(), но также следует использоватьtouch-action, чтобы убедиться, что веб-обозреватель знает о намерениях приложения до того, как "проснутся" обработчики событий.

When a gesture is started, the browser intersects thetouch-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 specifytouch-action explicitly on any of that element's descendants. After a gesture has started, changes totouch-action values will not have any impact on the behavior of the current gesture.

Syntax

Thetouch-action property may be specified as either:

• any one of the keywordsauto,none,manipulation,or
• one of the keywordspan-x,pan-left,pan-right, and/or one of the keywordspan-y,pan-up,pan-down, plus optionally the keywordpinch-zoom.

Значения

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 withpan-y, pan-up,pan-down and/orpinch-zoom.

pan-y

Enable single-finger vertical panning gestures. May be combined withpan-x, pan-left,pan-right and/orpinch-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 ofclick 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 likewisepan-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 thepan- values.

Formal syntax

touch-action =
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 ofclick events caused by support for the double-tap to zoom gesture.

html {  touch-action: manipulation;}

Спецификации

Совместимость с браузерами

Смотрите также

• Pointer Events
• WebKit BlogMore Responsive Tapping on iOS