touch-action
touch-action
该touch-actionCSS属性指定是否，以及以何种方式，给定的区域，可以由用户通过触摸屏操作（例如，通过平移或缩放内置的浏览器功能）。
/* Keyword values */
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;
/* Global values */
touch-action: inherit;
touch-action: initial;
touch-action: unset;
| Initial value | auto |
|---|---|
| 应用对象 | all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups |
| 是否可继承 | no |
| 媒体 | visual |
| 计算值 | as specified |
| 动画类型 | discrete |
| 规范顺序 | the unique non-ambiguous order defined by the formal grammar |
默认情况下，平移（滚动）和捏手势由浏览器独占处理。当浏览器开始处理触摸手势时，使用的应用程序Pointer_events将收到一个pointercancel事件。
当手势开始时，浏览器将触摸元素及其所有祖先的触摸动作值与实现手势的触摸动作值（换句话说，第一个包含滚动元素）相交。
语法
该touch-action属性可以被指定为：
- 关键字中的任何一个
auto，none，manipulation，或者
- 的关键字之一
pan-x，pan-left，pan-right，和/或其中一个关键字pan-y，pan-up，pan-down，加上任选的关键字pinch-zoom。
值
auto当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进行平滑、缩放等。
形式语法
auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation
实例
最常见的用法是禁用元素（及其不可滚动的后代）上的所有手势，以提供自己的拖动和缩放行为 - 如地图或游戏表面。
#map {
touch-action: none;
}
另一种常见模式是使用指针事件来处理水平平移但不想干扰垂直滚动或缩放文档的图像轮播。
.image-carousel {
width: 100%;
height: 150px;
touch-action: pan-y pinch-zoom;
}
触摸动作也经常用于完全禁用由于支持双击缩放手势而引起的点击事件的延迟。
html {
touch-action: manipulation;
}
规范
| Specification | Status | Comment |
|---|---|---|
| Compatibility StandardThe definition of 'touch-action' in that specification. | Living Standard | Added pinch-zoom property value. |
| Pointer Events – Level 2The definition of 'touch-action' in that specification. | Editor's Draft | Added pan-left, pan-right, pan-up, pan-down property values. |
| Pointer EventsThe definition of 'touch-action' in that specification. | Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 36.0 | (Yes) | 52.0 (52.0)1 | 10.0-ms2 11.0 | 23 | No support4 |
| pan-up, pan-down, pan-left, pan-right | 55.0 | No support | No support5 | ? | 42 | No support4 |
| pinch-zoom | 56.0 | (Yes) | No support5 | 10.0-ms2 11.0 | 43 | No support4 |
| Feature | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | 36.0 | 36.0 | (Yes) | 52.0 (52.0)1 | (Yes) | (Yes) | 9.1 3 |
| pan-up, pan-down, pan-left, pan-right | 55.0 | 55.0 | No support | No support5 | No support | 42 | No support |
| pinch-zoom | 56.0 | 56.0 | (Yes) | No support5 | ? | 43 | No support |
