touch-action
CSS 屬性可讓開發人員限制使用者與元素互動的方式,這對於防止在非必要時分派事件非常有幫助。
在 55 版之前,Chrome 支援 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
的開發人員實作的部分邏輯。