touch-action

Jump to: navigation, search

touch-action

This page has been flagged with the following issues:

High-level issues:


W3C Working Draft

Summary

Determines whether touch input may trigger default behavior supplied by the user agent, such as panning or zooming.

Overview table

Initial value auto
Applies to block-level elements, SVG elements
Inherited No
Media visual
Computed value Same as specified value
Animatable No
CSS Object Model Property

Syntax

  • touch-action: pan-y
  • touch-action: auto
  • touch-action: none
  • touch-action: pan-x


Values

auto
The user agent MAY determine any permitted touch behaviors, such as panning and zooming manipulations of the viewport, for touches that begin on the element.
none
Touches that begin on the element MUST NOT trigger default touch behaviors.
pan-x
The user agent MAY consider touches that begin on the element only for the purposes of horizontally scrolling the element's nearest ancestor with horizontally scrollable content.
pan-y
The user agent MAY consider touches that begin on the element only for the purposes of vertically scrolling the element's nearest ancestor with vertically scrollable content.


Examples

You might find the following example within a fingerpainting application to ensure that its canvas doesn't move when a user touches and manipulates it. When a user touches this canvas and moves his or her finger, no manipulation will occur. DOM events will be sent instead.

CSS

canvas#fingerpainter {
  touch-action: none;
}

View live exampleThe application has content that extends horizontally beyond the viewport and the desired behavior is to allow the user to scroll content left and right as desired without the browser moving the entire page.

HTML

   This element receives pointer events when not panning in the horizontal direction.



Related specifications

Specification Status Related Changes
Pointer Events Editor's Draft Section 9.1

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support Unsupported
Unsupported
IE11
IE10 -ms
?
?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?


Compatibility notes

Browser Version Note
Internet Explorer 10 Supported as -ms-touch-action with the following additional values:;pan-x: The element permits touch-driven panning on the horizontal axis. The touch pan is performed on the nearest ancestor with horizontally scrollable content.;pan-y: The element permits touch-driven panning on the vertical axis. The touch pan is performed on the nearest ancestor with vertically scrollable content.;pinch-zoom: The element permits pinch-zooming. The pinch-zoom is performed on the nearest ancestor with zoomable content.;manipulation: The element permits touch-driven panning and pinch-zooming. This is the shorthand equivalent of "pan-x pan-y pinch-zoom".;double-tap-zoom: The element permits double-tap-zooming. The double-tap-zoom is performed on the full page.

See also

Related articles

Pointer Events


  • touch-action








Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: Article