touch-action

Baseline 廣泛可用 *

此功能已成熟，並可在多種裝置和瀏覽器版本上使用。自 2019 年 9 月以來，它已在各種瀏覽器中可用。

* 此特性的某些部分可能存在不同級別的支援。

touch-action CSS 屬性設定觸控式螢幕使用者如何操作元素的區域（例如，透過瀏覽器內建的縮放功能）。

預設情況下，平移（滾動）和捏合手勢由瀏覽器獨佔處理。使用指標事件的應用程式將在瀏覽器開始處理觸控手勢時收到 pointercancel 事件。透過明確指定哪些手勢應由瀏覽器處理，應用程式可以在 pointermove 和 pointerup 監聽器中提供其餘手勢的自身行為。使用觸控事件的應用程式透過呼叫 preventDefault() 停用瀏覽器對手勢的處理，但也應使用 touch-action 以確保瀏覽器在呼叫任何事件監聽器之前瞭解應用程式的意圖。

當手勢開始時，瀏覽器會交叉觸控元素及其祖先的 touch-action 值，直到實現該手勢的元素（換句話說，是第一個包含可滾動元素）。這意味著在實踐中，touch-action 通常僅應用於具有某些自定義行為的頂級元素，而無需在其任何後代上明確指定 touch-action。

注意：手勢開始後，對 touch-action 的更改不會對手勢的當前行為產生任何影響。

語法

css

/* 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: revert;
touch-action: revert-layer;
touch-action: unset;

touch-action 屬性可以指定為：

關鍵字 auto、none、manipulation 之一，或
關鍵字 pan-x、pan-left、pan-right 之一和/或關鍵字 pan-y、pan-up、pan-down 之一，以及可選的關鍵字 pinch-zoom。

值

auto: 啟用瀏覽器處理所有平移和縮放手勢。
none: 停用瀏覽器處理所有平移和縮放手勢。
pan-x: 啟用單指水平平移手勢。可與 pan-y、pan-up、pan-down 和/或 pinch-zoom 結合使用。
pan-y: 啟用單指垂直平移手勢。可與 pan-x、pan-left、pan-right 和/或 pinch-zoom 結合使用。
manipulation: 啟用平移和捏合縮放手勢，但停用其他非標準手勢，例如雙擊縮放。停用雙擊縮放消除了瀏覽器在使用者輕觸螢幕時延遲生成點選事件的需要。這是“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: 啟用頁面的多指平移和縮放。這可以與任何 pan- 值結合使用。

無障礙

宣告 touch-action: none; 可能會抑制瀏覽器縮放功能的操作。這將阻止有低視力的人閱讀和理解頁面內容。

正式定義

初始值	`auto`
應用於	所有元素，除了：非替換的行內元素、表格行、行組、表格列和列組
繼承性	否
計算值	同指定值
動畫型別	不可動畫化

正式語法

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

示例

停用所有手勢

最常見的用法是停用元素（及其不可滾動後代）上的所有手勢，該元素提供自己的拖動和縮放行為——例如地圖或遊戲介面。

HTML

html

<div id="map"></div>

CSS

css

#map {
  height: 150vh;
  width: 70vw;
  background: linear-gradient(blue, green);
  touch-action: none;
}

結果

規範

規範
相容性 # touch-action
指標事件 # the-touch-action-css-property

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者在 2025 年 7 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題