觸控動作選項

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 實作這些邏輯。