前言

現有一圖片滑塊補全驗證碼，需要保證滑動滑塊時，背景不會跟隨移動。

解決

給整體背景添加css

touch-action: manipulation;

給驗證碼元素添加

touch-action: none;

touch-action

CSS 屬性 touch-action 用于設置觸摸屏用戶如何操縱元素的區域 (例如，瀏覽器內置的縮放功能)。

CSSCopy to Clipboard

/* 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 (en-US) 事件。通過明確指定瀏覽器應該處理哪些手勢，應用程序可以在 pointermove 和 pointerup (en-US) 監聽器中為其余的手勢提供自己的行為。使用 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

  啟用多手指平移和縮放頁面。這可以與任何平移值組合。

示例

最常見的用法是禁用元素（及其不可滾動的后代）上的所有手勢，以使用自己提供的拖放和縮放行為（如地圖或游戲表面）。

#map {
  touch-action: none;
}

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

.image-carousel {
  width: 100%;
  height: 150px;
  touch-action: pan-y pinch-zoom;
}

觸摸動作也經常用于完全解決由支持雙擊縮放手勢引起的點擊事件的延遲。

html {
  touch-action: manipulation;
}