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事件。
通过明确指定浏览器应该处理哪些手势，应用程序可以为其余手势提供自己的行为，pointermove并pointerup为其余的手势提供监听器。应用程序使用Touch_events
通过调用禁用浏览器处理手势preventDefault()，但也应该使用触摸动作来确保浏览器在调用任何事件侦听器之前知道应用程序的意图。
当手势开始时，浏览器将触摸元素及其所有祖先的触摸动作值与实现手势的触摸动作值（换句话说，第一个包含滚动元素）相交。
这意味着在实践中，触摸动作通常只应用于具有一些自定义行为的单个元素，而不需要在该元素的任何后代上明确指定触摸动作。
手势开始后，触摸动作值的更改将不会对当前手势的行为产生任何影响。
语法
该touch-action属性可以被指定为：
- 关键字中的任何一个
auto，none，manipulation，或者
- 的关键字之一
pan-x，pan-left，pan-right，和/或其中一个关键字pan-y，pan-up，pan-down，加上任选的关键字pinch-zoom。
值
auto当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进行平滑、缩放等。
none当触控事件发生在元素上时，不进行任何操作。
pan-x启用单指水平平移手势。可以与?pan-y 、pan-up、pan-down?和／或?pinch-zoom组合使用。
pan-y启用单指垂直平移手势。可以与?pan-x 、pan-left 、pan-right?和／或?pinch-zoom组合使用。
manipulation浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持的行为不被支持。启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。 禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。 这是“pan-x pan-y pinch-zoom”（为了兼容性本身仍然有效）的别名。
pan-left,?pan-right,pan-up,pan-down 启用以指定方向滚动开始的单指手势。 一旦滚动开始，方向可能仍然相反。 请注意，滚动“向上”（pan-up）意味着用户正在将其手指向下拖动到屏幕表面上，同样pan-left?表示用户将其手指向右拖动。 多个方向可以组合，除非有更简单的表示（例如，“pan-left pan-right”无效，因为“pan-x”更简单，而“pan-left pan-down”有效）。
pinch-zoom启用多手指平移和缩放页面。 这可以与任何平移值组合。
形式语法
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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
