CSS 属性 touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动,缩放等)
默认情况下,平移(滚动) 和 缩放手势由浏览器专门处理。该属性用于取消浏览器默认手势行为,开发人员自定义滚动和手势行为。
touch-action的值:
auto : 当触控事件发送在元素上时,由浏览器来决定进行那些操作,比如viewport进行平滑 缩放。
none : 当触控事件发生在元素上时,不进行任何操作
pan-x : 启用单指水平平移手势
pan-y : 启用单指垂直平移手势。
manipulation : 只可以进行滚动和持续缩放操作。如双击缩放等别的手势
pinch-zoom : 启用多手指平移和缩放页面,这可以和任何平移值组合 如 touch-action:pan-x pan-y pinch-zoom;
最常见的用法时禁用元素(及其不可滚动的后代)上的所有手势,以使用自己提供的拖放和缩放的行为
touch-action:none;
还有一个用法是使用指针事件处理水平平移的图片轮播,但不想干扰页面的垂直滚动或缩放
touch-action:pan-y pinch-zoom;
解决双击缩放手势引起的点击事件延迟
touch-action:manipulation;