触摸操作选项

Matt Gaunt

借助 touch-action CSS 属性，开发者可以限制用户与元素的互动方式，这对于防止在不需要时分派事件特别有用。

在版本 55 之前，Chrome 支持 pan-x 和 pan-y，这两个属性会限制元素只能沿一个方向滚动。

以下视频展示了未定义 touch-action 的元素示例（左），以及 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 来实现这些逻辑。