Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

touchAction property

Specifies whether and how a given region can be manipulated by the user (for instance, by panning or zooming).

Note  As of Internet Explorer 11, the Microsoft vendor prefixed version of this event (-ms-touch-action) is no longer supported and may be removed in a future release. Instead, use the non-prefixed name IHTMLCSSStyleDeclaration2::touchAction, which is better for standards compliance and future compatibility.

This property is read/write.

Internet Explorer 10

 

Syntax

HRESULT put_touchAction(
  [in]   DOMString val
);

HRESULT get_touchAction(
  [out]  DOMString **ptr
);

Property values

Type: DOMString

String format

auto | none | [ [ [ pan-x || pan-y || pinch-zoom ? ] | manipulation ] || double-tap-zoom ? ]

CSS information

Applies ToAll elements
Mediainteractive
Inheritedno
Initial Valueauto

Standards information

Remarks

This property requires Windows 8 or later.

When a user touches an element, that element's IHTMLCSSStyleDeclaration2::touchAction property determines the default touch behaviors permitted for that contact, like panning or zooming.

The touch behavior is then performed on the nearest ancestor element that is capable of that behavior, unless an intermediate ancestor element specifies that the behavior is not permitted.

If a default touch behavior is not invoked, Document Object Model (DOM) events will be fired for that contact instead (see Gesture Events).

This property has no effect on mouse, keyboard, or touchpad interaction.

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.


canvas#fingerpainter {
  touch-action: none;
}

The following example builds a list that pans in the x-direction but allows dragging or rearranging if the user pulls an item in the y-direction (similar to the Windows 8 Start screen) When the user touches a listEntry and moves his or her finger in the x-direction, the list will pan. If the user instead moves his or her finger in the y-direction, no pan will occur. DOM events will be sent instead.


div.list {
  overflow-x: scroll;
}

div.list > div.listEntry {
  touch-action: pan-x;
}

Starting with Windows 8.1, you can explicitly specify an element to have cross-slide behavior along a given axis using the cross-slide-x or cross-slide-y value. The following table lists various cross-slide touch-action value combinations and their behaviors.

CSS RuleResulting behavior
touch-action: cross-slide-x pan-y;The element cross-slides in the horizontal direction and pans vertically.
touch-action: cross-slide-x;The element cross-slides in the horizontal direction and fires pointer events for touch interactions along the vertical axis.
touch-action: cross-slide-x pan-x;
touch-action: cross-slide-x cross-slide-y;
touch-action: cross-slide-x manipulation;
Two mutually exclusive behaviors are specified for the same axis; the rule is ignored.

 

Requirements

IDL

Mshtml.idl

See also

Pointer Events

 

 

Community Additions

Show:
© 2014 Microsoft