touch-action
The touch-action property in CSS gives you control over the effect of touchscreen interactions with an element, similar to the more widely-used pointer-events property used to control mouse interactions.
The touch-action property is useful primarily for interactive UI elements that need slightly different behavior depending on the type of device being used. When your users might expect an element to behave a particular way with a mouse, and slightly different behavior on a touch screen, touch-action will come in handy. The most obvious example of this is an interactive map element. If you’ve ever viewed a map not designed to work with touch devices, you’ve probably tried to pinch and zoom only to find the browser magnifying the element, but not actually zooming the actual map. By default, a browser will handle touch interactions automatically: Pinch to zoom, swipe to scroll, etc. Setting touch-action to none will disable all browser handling of these events, leaving them up to you to implement (via JavaScript). If you only want to take over one interaction, tell the browser to handle the rest. For example, if you wrote some JavaScript that only handles zooming, you can tell the browser to handle everything else with this property: touch-action: pan-x pan-y; . See the Pen examples of touch-action by CSS-Tricks (@css-tricks) on CodePen.
touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation- auto : Allows the browser to handle all pan and zoom interactions.
- none : Disables browsers from handling all pan and zoom interactions. This opens up the ability to custom define those interactions in JavaScript.
- pan-x : Enables horizontal panning with a single finger interaction. It is shorthand for the pan-left and pan-right values, but can be used in combination with pan-y , pan-up , pan-down and pinch-zoom .
- pan-y Enables vertical panning with a single finger interaction. It is shorthand for the pan-up and pan-down values, but can be used in combination with pan-x , pan-left , pan-right and pinch-zoom .
- manipulation : Enables pinch and zoom interactions, but disables others you might find on some devices, like double-tap to zoom. It is shorthand for the combination of pan-x pan-y pinch-zoom .
- pan-left (Experimental): Enables a single finger interaction when a user’s finger moves to the right, which pans toward the left.
- pan-right (Experimental): Enables a single finger interaction when a user’s finger moves to the left, which pans toward the right.
- pan-down (Experimental): Enables a single finger interaction when a user’s finger moves up, which pans downward.
- pan-up (Experimental): Enables a single finger interaction when a user’s finger moves down, which pans upward.
- pinch-zoom : Enables multi-finger interactions and can be combined with any other pan- value.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Mobile / Tablet
Safari is the glaring omission to touch-action support. iOs Safari has limited support, only for the auto and manipulation values.
- Pointer Events Level 2 Specification – The spec is currently in Candidate Recommendation but is intended to move to Proposed Recommendation early 2019, as of this writing. The intent is that the document will become an official W3C Recommendation.
- MDN Documentation
- Touch-action pinch-zoom CSS property Sample – Google Chrome’s demo of its implementation.
- WebKit Bugzilla Ticket #133112 – Open ticket to propose Safari support. Add your vote to bump it up.
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
Keep up to date on web dev
with our hand-crafted newsletter
DigitalOcean
touch-action
The touch-action CSS property sets how a region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).
/* 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;
| Initial value | auto |
|---|---|
| Applies to | all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | 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.
Syntax
The touch-action property may be specified as either:
- any one of the keywords auto , none , manipulation , or
- one of the keywords pan-x , pan-left , pan-right , and/or one of the keywords pan-y , pan-up , pan-down , plus optionally the keyword pinch-zoom .
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.
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.
touch-action is also often used to completely disable the delay of click events caused by support for the double-tap to zoom gesture.
Accessibility concerns
A declaration of touch action: none; may inhibit operating a browser’s zooming capabilities. This will prevent people experiencing low vision conditions from being able to read and understand page content.
Specifications
| Specification | Status | Comment |
|---|---|---|
| Compatibility Standard The definition of ‘touch-action’ in that specification. | Living Standard | Added pinch-zoom property value. |
| Pointer Events – Level 2 The definition of ‘touch-action’ in that specification. | Working Draft | Added pan-left , pan-right , pan-up , pan-down property values. |
| Pointer Events The definition of ‘touch-action’ in that specification. | Recommendation | Initial definition. |
Browser compatibilityUpdate compatibility data on GitHub
| Desktop | |||||
|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| Basic support | 36 | 12 | 52 52 Not applicable to Firefox platforms that support neither pointer nor touch events. 29 | ||
touch — action
Можно ли нажать на элемент пальцем? Что-то вроде тач-событий в JavaScript.
Время чтения: меньше 5 мин
Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство touch — action позволяет контролировать то, как с элементом можно взаимодействовать на сенсорных экранах.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
- none — запрещает все типы взаимодействий. Можно обрабатывать события при помощи JavaScript.
- auto — разрешает все типы взаимодействия (значение по умолчанию).
- manipulation — элемент можно сдвигать и зумить. Это сокращение для комбинации pan — x pan — y pinch — zoom . Остальные нестандартные жесты, вроде двойного тапа, запрещены.
- pan — x — элемент можно сдвигать по оси x с помощью одного пальца. Это сокращение для значений pan — left и pan — right . Может использоваться в сочетании с pan — y , pan — up , pan — down и pinch — zoom .
- pan — y — элемент можно смещать по оси y с помощью одного пальца. Это сокращение для значений pan — up и pan — down . Может использоваться в сочетании с pan — x , pan — left , pan — right и pinch — zoom .
- pan — left — элемент можно смещать только если начать движение от левого края (эксперимент).
- pan — right — элемент можно смещать только если начать движение от правого края (эксперимент).
- pan — down — элемент можно смещать только если начать движение снизу вверх (эксперимент).
- pan — up — элемент можно смещать только если начать движение сверху вниз (эксперимент).
- pinch — zoom — элемент можно зазумить щипком. Можно совместить с pan — x , pan — left , pan — right , pan — y , pan — up , pan — down .