深入研究 css touch-action 属性

1、CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。

 

/* 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;

触摸动作通常仅适用于具有某些自定义行为的单个元素，而无需在该元素的任何后代上明确指定触摸动作。 

 

touch-action: auto

默认值，表示由浏览器觉得进行什么操作，比如在viewport里设置的操作

touch-action: manipulation

只允许滚动和持续缩放，其他默认支持的行为都会被禁用；例如双击缩放

等同于 touch-action: pan-x pan-y pinch-zoom;

pan-x/pan-y: 可以水平/垂直移动

pinch-zoom: 可以缩放页面，用手指头缩放的那种

具体使用场景：

H5开发浏览器默认左右滑动行为

方法一：

html{

touch-action:none;

touch-action:pan-y;

}

方法二：

　　 element.addEventListener("mousedown", func, { passive: false});