这篇文章需要技术复核。如何帮忙。
这篇文章需要文法复核。如何帮忙。
这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
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.