屬性 CSS 觸摸操作：cómo domar gestos táctiles con precisión

首页 » 蟒蛇 » 屬性 CSS 觸摸操作：cómo domar gestos táctiles con precisión

Cuando trabajamos con Interfaces táctiles, hay un detalle que marca la differencia entre una experiencea y otra frustrante: 決定如何管理 el navegador 和 cuáles gestiona tu codigoCSS 屬性 touch-action 只要中斷器允許調整軍事配合即可。

Lejos de ser algo esotérico, touch-action 控制縮放比例、縮放比例以及其他預先確定的操作 que el navegador aplicaría al tocar un elemento。好的，請記住，在事件發生時，您可以使用 JavaScript 進行操作，並且可以控制真實的地圖元件、遊戲或遊戲。

¿什麼是精確的觸摸動作？

En pocas palabras， touch-action Indica al Agente de usuario qué acciones táctiles puede ejecutar de forma nativa 在頁面區域和事件保護區。觸覺互補 pointer-events, que solesmos asociar más a interacciones conratón, pero con un enfoque específico en gestos como el desplazamiento y el Zoom.

這樣， 允許使用 el navegador haga su trabajo（desplazar、hacer Zoom）或 bloquearlo para Implementar tú las interacciones （例如，zoom interno de un mapa）罪惡幹擾你的人工行為 click.

句法和用法

La propiedad acepta varias Combinaciones con reglas muy concretes. Puedes declarar un único valor, o componer varios valores 相容 調整策略和精確度。

/* Declaración típica */
#elemento {
  touch-action: pan-right pinch-zoom;
}

Si necesitas la gramática stricta, 正式殺戮:

touch-action =
  auto |
  none |
   ||  || pinch-zoom ] |
  manipulation

換一種說法， puedes usar uno de los valores globales（自動、無、操縱） 最好將水平和垂直方向的組合組合起來，更多 pinch-zoom 可選地。

觸摸動作的價值和它的意義

Esta propiedad ofrece valores pensados para casos muy concretos。 我希望透過 JavaScript 重新實作 gestos 相反，您可以透過自由來實現必要的條件。

auto

Deja que el navegador 消除廣場和變焦的管理事項。 Es el compportamiento por defoto: el usuario puede deslizar para desplazerse y pellizcar para ampliar sin que tengas que hacer nada más.

none

完成對導航者的干預。 禁止使用 pellizco-zoom nativos 進行縮放;您可以使用 JavaScript 來實作這些功能。這是理想的地圖或控制方式，可以 100% 控制。

manipulation

允許取消廣場和縮放縮放，但不能取消激活 ciertos gestos no estándar como el doble toque para ampliar。 Es, en la práctica, un alias de "平移 X 平移 Y 捏合縮放「（la Combinación Explícita se mantiene válida por compatibilidad）。Al quitar el doble toque， 消除事件發生的必要性 click tras un toque，lo que mejora la respuesta de la interfaz。

pan-x

的Activa 橫向廣場與獨奏德多. Puede combinarse con pan-y, pan-up, pan-down 和/或 pinch-zoom. Es un atajo que engloba pan-left y pan-right.

pan-y

的Activa el desplazamiento 垂直與獨奏 dedo. Puede combinarse con pan-x, pan-left, pan-right 和/或 pinch-zoom。 Del Mismo modo, es un ataj que incluye pan-up y pan-down.

pan-left, pan-right, pan-up, pan-down

允許 在指示方向上進行單獨的 dedo que empiezan 的目的。 Ojo: una vez iniciado el desplazamiento, 方向相反。 Hay un detalle que suele confundir: en terminos de interfaz, "向上搖攝“significa que el usuario arrastra el dedo hacia abajo en la pantalla para que el contenido se mueva hacia arriba；y”向左平移「這意味著 arrastrar el dedo a la derecha para que el contenido se desplace hacia la izquierda。

pinch-zoom

使能夠 多次縮放和縮小廣場。與價值的組合 pan-*。 En navegadores que lo Implementan, 使用代理啟動並連續放大中間訊息 因取消事件而無法採取行動。

組合與標準化規則

在組合方向上，有簡化規則。 No todo lo que se puede escribir es válido si hay una forma más simple例如，“pan-left pan-right「請考慮因錯誤的形式而導致的錯誤 pan-x.

罪禁運，乾草組合 que sí tienen Sentido，科莫“pan-left pan-down「允許去廣場 伊尼西亞·拉伊斯奎爾達·奧哈西亞·下霍。因此，沒有任何縮寫直接等效，因為組合是可接受的。

還請記住 普埃德斯·梅茲克拉爾·埃耶斯·佩利斯科例如，“pan-x pinch-zoom「允許在水平方向上進行縮放並進行多次縮放，然後在垂直方向上進行縮放。

Cuándo usar cada valor: 守護神

遊戲的主題是在頁面上嵌入地圖或遊戲。 Si quieres que el gesto de pellizcar afecte al propio mapa y no al Zoom del navegador，te interesa declarar touch-action: none; 您可以使用 JavaScript 來縮放個人化。

其他場景 單獨實施互動 （例如，變焦），您將優先選擇 el navegador mantenga el desplazamiento nativo。 En ese caso，“touch-action: pan-x pan-y;「骰子是我們的代理人，可以用來管理一切，並讓我們自由地行動。

水平方向的 UI 元件， pan-x 通常是最適合的選擇。允許在不進行任何操作時進行橫向縮放，在不進行任何操作時停止縮放，如果不處於活動狀態，則避免與垂直頁面滾動發生衝突。

如果你的首要任務是 立即響應托克帽和消除雙托克帽遲滯現象, manipulation es un atajo estupendo。 Quita el doble tap para ampliar y con ello la necesidad de retrasar el click, lo que da una sensación de “snappiness” en botones y enlaces.

對無障礙的影響

一個批評點： si declaras touch-action: none; 納韋加多爾國家放大。人物角色需要具備足夠的能力，才能轉換為無法存取的介面。

Cuando el contexto lo perpera, 考慮維護者 pinch-zoom 已啟用 或搜尋 無障礙替代方案 que no impidan el aumento. Hacer Zoom es，para muchos usuarios，una herramienta de lecture esencial；沒有la deactives a la ligera。

導航者之間的相容性

的支持 touch-action es amplio, pero con matices. 現代瀏覽器包括 Chrome (36+)、Edge (12+)、Firefox (52+) 和 Opera (23+) 實施主要價值的財產。

El punto delicado históricamente ha sido Safari. iOS Safari 有限制，因此無法解決 auto y manipulation，其他價值包括版本和上下文的變數。 Safari de escritorio (13+) 的最新版本，具有顯著的兼容性， 具體情況請參閱，這取決於多種組合。

Las tablas de compatibilidad públicas (las típicas que Consultamos a diario) 對社區和國家的貢獻的現實化; si tu proyecto es sensible a gestos concretos, prueba en dispositivos reales。十個口號 獨奏與配置與驗證 el comportamiento 的 pantalla táctil podrás de forma fidedigna.

實際使用範例

Veamos algunos 贊助人聲明生命的解決方案。 了解硬體觸覺方面的問題 Para comprobar que la experiencia es la esperada。

1) Desactivar todos los gestos (mapa o canvas individualizado)

使用該工具可以在幹擾情況下進行內部縮放。 El navegador no Interceptará ni el desplazamiento ni el pellizco.

<!-- HTML -->
<div id='mapa' class='superficie'></div>

<!-- CSS -->
.superficie {
  touch-action: none;
}

2) 允許本地縮放，單獨控制變焦

如果 JavaScript 已縮放，那麼導航器 管理 el 滾動 en ambos ejes para no reinventar la rueda.

.zoom-personalizado {
  touch-action: pan-x pan-y;
}

3) Desplazamiento 水平 con pellizco-zoom

Para carruseles complejos or galerías: 水平滾動 和 縮放 和 操作，sin scroll vertical nativo。

.galeria-avanzada {
  touch-action: pan-x pinch-zoom;
}

4) 最初方向的Deplazamientos

允許的便利場合 單獨行動 que arrancan hacia una dirección concreta （p. ej.，para no interferir con otros componentes）。

.panel-contextual {
  touch-action: pan-left pan-down;
}

5) Atajo pragmático：操縱

Cuando Buscas una respuesta táctil contundente sin doble toque， manipulation es un gran comodín。阿尤達·埃維塔爾·雷特拉索德爾 click 帽子後。

button, a {
  touch-action: manipulation;
}

與…的關係 pointer-events y eventos de clic

儘管他們有時會感到困惑， touch-action y pointer-events atacan problemas distintos。第二個決定 si un elemento responde a "punteros" (ratón, táctil, lápiz) a nivel de hit-testing;初步決定 que gestos táctiles por defeto puede ejecutar el navegador 在那個地區。

此外， Desactivar gestos como el doble toque con manipulation 淘汰賽 click tras un toque en móviles。簡單的Toque 和變焦的雙Toque 的啟動都存在延遲； Si el doble toque ya no Existe, el navegador puede despachar el click 無需等待

實施注意事項和細節

同 pinch-zoom, hay navegadores que 連續變焦 有意取消 JavaScript 操作。有利的組合 una sensación de inmediatez En el gesto de pellizco sobre elementos que lo alloweden。

También debes saber que, aun cuando restringes la dirección que inicia un desplazamiento, 正常情況下，捲軸方向會反轉。我想體驗紳士的能力，並在清單上或其他方面進行嘗試，並以一種 mitad del gesto 的方式人工完成。

良好做法

最初，應用最小幹預規則： 英勇的勇氣限制了你的反應. Si te basta con pan-x沒有用途 none。 Así preservas gestos nativos y accesibilidad。

第二，與真實硬體相關的組件： Lo que parece optimo con el emulador puede no reflejar la inercia y la fricción reales。 Las sensaciones táctiles son sutiles, y pequeños cambios en touch-action se notan。

第三，根據產品需求進行變焦， 替代途徑 （控製文字、放大內部、對比 adecuado）。 Privar del del Zoom sin alternativa perjudica la lecture.

四方、文獻與設備配合： 在 CSS 和 JavaScript 之間進行對比 如果發生衝突，請注意聽眾要取消事件或媒體庫。

框架中的實用類

近期使用的許多框架 clases que mapean 1:1 a touch-action, lo cual acelera prototipado y cambios。習慣性遭遇變異 touch-auto, touch-none, touch-pan-x o touch-pan-y.

<div class='h-48 w-full touch-auto overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>
<div class='h-48 w-full touch-none overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>
<div class='h-48 w-full touch-pan-x overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>
<div class='h-48 w-full touch-pan-y overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>

使用 CSS 來保持連貫性； Recuerda que bajo el capó siguen siendo valores de touch-action，結合錯誤的組合和效果。

測試與調試

Para verificar el efecto, lo Ideal es un dispositivo táctil. Algunos 在 DevTools 上進行了最新的模擬操作，但並沒有再現完美的同時進行的多項操作。

如果演算法沒有回應，請修改優先權： ¿ el elemento realmente recibe los eventos？ ¿乾草聽眾取消 por preventDefault()? 確認 computed style de touch-action y 支票疊加 con pointer-events 節省您的時間。

Fragmentos listos para copiar

Unos cuantos atajos útiles para el día a día。 Úsalos como 基地和 ajústalos a tu caso.

/* Desactiva todo (señal de: me ocupo yo por JS) */
.superficie { touch-action: none; }

/* Solo desplazamiento horizontal */
.carrusel { touch-action: pan-x; }

/* Solo desplazamiento vertical */
.lista { touch-action: pan-y; }

/* Inicios hacia derecha + hacia arriba */
.panel { touch-action: pan-right pan-up; }

/* Pellizco-zoom + desplazamiento en cualquier eje (sin doble tap) */
.interactivo { touch-action: manipulation; }

Notas de soporte específicas

在過去， 價值 pinch-zoom 與 Chrome 版本 56 相關的熱門內容, y su compportamiento ha ido refinándose. En plataformas donde el pellizco sea una acción de sistema, verifica que tu app no entra enconflico con con SO 的動作 （例如， gestos de navegación por bordes）。

如果您是公共對象，包括 iOS，請參考： 與 Chromium 不相容的高級組合。 Las pruebas cruzadas son obligatorias cuando basas la UX en direcciones iniciales or en bloquear el doble toque.

簡述心智模型

不得含糊其辭。 獲得許可的首要條件 （平移 x、平移 y、平移左等）； después 決定 si añades pinch-zoom; y，si lo tuyo es la Rapidez， 我們作為 manipulation 作為捷徑 a lo típico sin doble toque.

沒有簡化： si tu Combinación se puede escribir con un atajo, 美國 el atajo。 Es 易讀 y evita valores inválidos (el clásico "pan-left pan-right" que debería ser pan-x).

植物葉植物

這是設計系統和元件庫中的一部分。 定義 CSS 中頻繁使用的用途 設備間的一致性。

/* Utilidades corporativas */
.u-touch-auto { touch-action: auto; }
.u-touch-none { touch-action: none; }
.u-touch-pan-x { touch-action: pan-x; }
.u-touch-pan-y { touch-action: pan-y; }
.u-touch-zoom { touch-action: pinch-zoom; }
.u-touch-sensible { touch-action: manipulation; }

Con estas clases, documentas la intención （例如，「明智的」暗示回應）en lugar de un detalle técnico aislado, lo que facilita la adopción por te de otros desarrolladores.

公共資金清單

– ¿ Escogido el valor menos intrusivo que cumple tu objetivo 嗎？ Si algo puede ser nativo, déjalo nativo.
– ¿ Tu app sigue siendo 可用於縮放嗎？ 不可犧牲任何便利性.
– ¿有比較 iOS 和 Android 的真實性嗎？ La emulación es util, pero no definitiva.
– ¿ Loslisteners no interfieren con el compportamiento esperado? Evita cancelaciones globales.

很清楚 touch-action 這是一種重要的觸覺體驗：允許對本地和控制進行限制，減少延遲 click tras el toque，y ofrece Combinaciones ricas para casos avanzados； si a eso sumas pruebas en dispositivos reales y un ojo en accesibilidad, tentrás Componentes tctiles que se sienten que se sientenables Componentes tctiles que se sientenable。