CSS 屬性 touch-action 用於指定某個給定的區域是否允許用戶操作,以及如何響應用戶操作(比如瀏覽器自帶的划動、縮放等)。
/* Keyword values */
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;
/* Global values */
touch-action: inherit;
touch-action: initial;
touch-action: unset;
默認情況下,平移(滾動)和縮放手勢由瀏覽器專門處理。
使用 Pointer_events
的應用程序將在瀏覽器開始處理觸摸手勢時收到一個 pointercancel
事件。
通過明確指定瀏覽器應該處理哪些手勢,應用程序可以在 pointermove
和 pointerup
監聽器中為其余的手勢提供自己的行為。
使用 Touch_events
的應用程序通過調用 preventDefault()
禁用瀏覽器處理手勢,
但也應使用觸摸操作確保瀏覽器在調用任何事件偵聽器之前,了解應用程序的意圖。
當手勢開始時,瀏覽器與觸摸的元素及其所有祖先的觸摸動作值相交直到一個實現手勢
(換句話說,第一個包含滾動元素)的觸摸動作值。 這意味着在實踐中,觸摸動作通常僅適用於具有某些自定義行為的單個元素,
而無需在該元素的任何后代上明確指定觸摸動作。 手勢開始之后,觸摸動作值的更改將不會對當前手勢的行為產生任何影響。
使用語法
touch-action 屬性可以被指定為:
- 任何一個關鍵字
auto
、none
、manipulation
,或 - 零或任何一個關鍵字
pan-x
、pan-left
、pan-right
,加零或任何一個關鍵字pan-y
、pan-up
、pan-down
,加可選關鍵字pinch-zoom
auto
當觸控事件發生在元素上時,由瀏覽器來決定進行哪些操作,比如對viewport進行平滑、縮放等。 none
當觸控事件發生在元素上時,不進行任何操作。 pan-x
啟用單指水平平移手勢。可以與 pan-y 、pan-up、pan-down 和/或 pinch-zoom 組合使用。 pan-y
啟用單指垂直平移手勢。可以與 pan-x 、pan-left 、pan-right 和/或 pinch-zoom 組合使用。 manipulation
瀏覽器只允許進行滾動和持續縮放操作。任何其它被auto值支持的行為不被支持。 啟用平移和縮小縮放手勢,但禁用其他非標准手勢,例如雙擊以進行縮放。 禁用雙擊可縮放功能可減少瀏覽器在用戶點擊屏幕時延遲生成點擊事件的需要。 這是“pan-x pan-y pinch-zoom”(為了兼容性本身仍然有效)的別名。 pan-left, pan-right, pan-up, pan-down
啟用以指定方向滾動開始的單指手勢。 一旦滾動開始,方向可能仍然相反。 請注意,滾動“向上”(pan-up)意味着用戶正在將其手指向下拖動到屏幕表面上, 同樣 pan-left 表示用戶將其手指向右拖動。 多個方向可以組合, 除非有更簡單的表示(例如,“pan-left pan-right”無效,因為“pan-x”更簡單,而“pan-left pan-down”有效)。 pinch-zoom 啟用多手指平移和縮放頁面。 這可以與任何平移值組合。
瀏覽器兼容性