touch-action

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

Summary

CSS属性 touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如划动、缩放等)。

初始值auto
适用元素all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups
是否是继承属性
适用媒体visual
计算值as specified
是否适用于 CSS 动画
正规顺序the unique non-ambiguous order defined by the formal grammar

Syntax

/* Keyword values */
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-y;
touch-action: manipulation;

/* Global values */
touch-action: inherit;
touch-action: initial;
touch-action: unset;

Values

auto
当触控事件发生在元素上时,由浏览器来决定进行哪些操作,比如对viewport进行平滑、缩放等。
none
当触控事件发生在元素上时,不进行任何操作。
pan-x
如果当前元素最近的父元素可以横向滚动时,浏览器只允许在该父元素上进行横向滚动。
pan-y
如果当前元素最近的父元素可以纵向滚动时,浏览器只允许在该父元素上进行纵向滚动。
manipulation
浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持的行为不被支持。

Formal syntax

auto | none | [[ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ]] | manipulation

Example

.list {
  width: 200px;
  height: 50px;
  overflow-x: scroll;
}

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

Specifications

Specification Status Comment
Pointer Events
touch-action
Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 36.0 未实现[1] 10.0-ms[2]
11.0
26.0 未实现[4]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 37.0 未实现[1] 未实现 未实现 未实现[4]

[1] Since Firefox 29, support in Firefox is hidden behind the layout.css.touch_action.enabled preference (bug 960316).

[2] IE10+ additionally supports the non-standard values pinch-zoom, double-tap-zoom, cross-slide-x and cross-slide-y.

[4] See WebKit bug 133112.

文档标签和贡献者

 此页面的贡献者: teoli, TooBug
 最后编辑者: teoli,