CSS touch-action
原创touch-action
CSS 属性 touch-action 用于设置触摸屏用户如何操纵元素的区域 (例如,浏览器内置的缩放功能)。
css
/* 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;
| 初始值 | auto |
|---|---|
| 适用元素 | all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| 动画类型 | Not animatable |
默认情况下,平移(滚动)和缩放手势由浏览器专门处理。使用 Pointer_events 的应用程序将在浏览器开始处理触摸手势时收到一个 pointercancel 事件。通过明确指定浏览器应该处理哪些手势,应用程序可以在 pointermove 和 pointerup 监听器中为其余的手势提供自己的行为。使用 Touch_events 的应用程序通过调用 preventDefault() 禁用浏览器处理手势,但也应使用触摸操作确保浏览器在调用任何事件侦听器之前,了解应用程序的意图。
当手势开始时,浏览器与触摸的元素及其所有祖先的触摸动作值相交直到一个实现手势(换句话说,第一个包含滚动元素)的触摸动作值。这意味着在实践中,触摸动作通常仅适用于具有某些自定义行为的单个元素,而无需在该元素的任何后代上明确指定触摸动作。手势开始之后,触摸动作值的更改将不会对当前手势的行为产生任何影响。
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权本站发表,未经许可,不得转载。
开发学习网



