借助 touch-action
CSS 属性,开发者可以限制用户与元素互动的方式,这对于防止系统不必要时分派事件尤为有用。
在版本 55 之前,Chrome 支持 pan-x
和 pan-y
,用于将元素限制为单向滚动。
下面的视频展示了一个未定义触摸操作的元素示例(左侧),以及 pan-x 和 pan-y(中间和右侧)。
中间和右侧抓屏的 CSS 为:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
在 Chrome 55 中,添加了 pan-left
、pan-right
、pan-up
和 pan-down
。这些属性在行为上存在细微但很重要的行为差异。
这些属性会强制用户在元素响应之前向一个方向启动手势。这与“下拉刷新”手势类似,后者仅在用户在屏幕上向下手势时才会响应。
下面的视频演示了 pan-right
和 pan-down
,它们要求手势分别从右到左和从下到上。手势开始后,您就可以来回平移了。而只是受影响的初始方向。
虽然该视频演示了此行为,但您可能会发现,通过查看示例进行亲身尝试会更容易。
此演示的 CSS 为:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
触摸操作世界中发生的最后一件事是 pinch-zoom
属性。这是 Chrome 55 中的一个新属性,位于一个标志后面,可与任何平移选项(即 pan-x
、pan-y
、pan-left
、pan-right
、pan-down
、pan-up
)搭配使用。
如果您在网站上执行双指张合操作,网页内容通常就会放大。
定义 touch-action
可阻止此行为,但添加双指张合缩放功能将重新启用此行为。
此视频展示了 touch-action: pan-x
和 touch-action: pan-x pinch-zoom
之间的区别;
有些逻辑原本需要由开发者使用 pointer-events
实现,那么所有这些属性都应能简化这一逻辑。