觸控動作選項

Matt Gaunt

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;
}

最後，我們將介紹 touch-action 的最後一個屬性 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 實作這些邏輯。