触摸操作选项

Matt Gaunt

借助 touch-action CSS 属性,开发者可以限制用户与元素互动的方式,这对于防止系统不必要时分派事件尤为有用。

在版本 55 之前,Chrome 支持 pan-xpan-y,用于将元素限制为单向滚动。

下面的视频展示了一个未定义触摸操作的元素示例(左侧),以及 pan-x 和 pan-y(中间和右侧)。

中间和右侧抓屏的 CSS 为:

.pan-x {
    touch-action: pan-x;
}

.pan-y {
    touch-action: pan-y;
}

在 Chrome 55 中,添加了 pan-leftpan-rightpan-uppan-down。这些属性在行为上存在细微但很重要的行为差异。

这些属性会强制用户在元素响应之前向一个方向启动手势。这与“下拉刷新”手势类似,后者仅在用户在屏幕上向下手势时才会响应。

下面的视频演示了 pan-rightpan-down,它们要求手势分别从右到左和从下到上。手势开始后,您就可以来回平移了。而只是受影响的初始方向。

虽然该视频演示了此行为,但您可能会发现,通过查看示例进行亲身尝试会更容易。

此演示的 CSS 为:

.pan-right {
    touch-action: pan-right;
}

.pan-down {
    touch-action: pan-down;
}

触摸操作世界中发生的最后一件事是 pinch-zoom 属性。这是 Chrome 55 中的一个新属性,位于一个标志后面,可与任何平移选项(即 pan-xpan-ypan-leftpan-rightpan-downpan-up)搭配使用。

如果您在网站上执行双指张合操作,网页内容通常就会放大。 定义 touch-action 可阻止此行为,但添加双指张合缩放功能将重新启用此行为。

此视频展示了 touch-action: pan-xtouch-action: pan-x pinch-zoom 之间的区别;

有些逻辑原本需要由开发者使用 pointer-events 实现,那么所有这些属性都应能简化这一逻辑。