touch-action屬性

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;

初始值	auto
適用元素	all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups
是不是繼承屬性	否
適用媒體	visual
計算值	as specified
Animation type	discrete
正規順序	the unique non-ambiguous order defined by the formal grammar

默認狀況下，平移（滾動）和縮放手勢由瀏覽器專門處理。 使用  Pointer_events 的應用程序將在瀏覽器開始處理觸摸手勢時收到一個  pointercancel 事件。 經過明確指定瀏覽器應該處理哪些手勢，應用程序能夠在  pointermove 和  pointerup 監聽器中爲其他的手勢提供本身的行爲。 使用  Touch_events 的應用程序經過調用  preventDefault() 禁用瀏覽器處理手勢，但也應使用觸摸操做確保瀏覽器在調用任何事件偵聽器以前，瞭解應用程序的意圖。

當手勢開始時，瀏覽器與觸摸的元素及其全部祖先的觸摸動做值相交直到一個實現手勢（換句話說，第一個包含滾動元素）的觸摸動做值。 這意味着在實踐中，觸摸動做一般僅適用於具備某些自定義行爲的單個元素，而無需在該元素的任何後代上明確指定觸摸動做。 手勢開始以後，觸摸動做值的更改將不會對當前手勢的行爲產生任何影響。

Link to section語法

touch-action 屬性能夠被指定爲:

• 任何一個關鍵字  auto、 none、 manipulation，或
• 零或任何一個關鍵字  pan-x、 pan-left、 pan-right，加零或任何一個關鍵字  pan-y、 pan-up、 pan-down，加可選關鍵字  pinch-zoom.

Link to section值

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

啓用多手指平移和縮放頁面。 這能夠與任何平移值組合。

Link to section正式語法

auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation

Link to section示例

最多見的用法是禁用元素（及其不可滾動的後代）上的全部手勢，以使用本身提供的拖放和縮放行爲（如地圖或遊戲表面）。

#map {

touch-action: none;}

另外一種常見的模式是使用指針事件處理水平平移的圖像輪播，但不想幹擾網頁的垂直滾動或縮放。

.image-carousel {

width: 100%;

height: 150px;

touch-action: pan-y pinch-zoom;}

觸摸動做也常常用於徹底解決由支持雙擊縮放手勢引發的點擊事件的延遲。

html {

touch-action: manipulation;

}