touch-action

• Comments from section
• All comments
• Help

WebPlatform Docs welcomes all comments. If you want to comment, please register or log in. It is free.

This tool helps to make and review comments inline.

How to Use

insert instructions, with images, here

touch-action

This page has been flagged with the following issues:

High-level issues:

• Stub

• Needs Flags

Content:

• Incomplete

• Compatibility Incomplete

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: auto
• touch-action: none
• touch-action: inherit

Values

auto

The user agent determines the 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 do not trigger default touch behaviors.

inherit

The property takes the same specified value as the property for the element's parent.

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;
}

Related specifications

Specification	Status	Related Changes
Pointer Events	Working Draft	Section 6.1

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic Support	?	?	? 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

• PointerEvent

• gotpointercapture

• lostpointercapture

• maxTouchPoints

• pointerEnabled

• pointercancel

• pointerdown

• pointerenter

• pointerleave

• pointermove

• pointerout

• pointerover

• pointerup

• releasePointerCapture

• setPointerCapture

• Introduction to multi-touch Web development

This article contains content originally from external sources.

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