touch-action

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2019.

* Some parts of this feature may have varying levels of support.

Die touch-action CSS-Eigenschaft legt fest, wie der Bereich eines Elements von einem Benutzer über einen Touchscreen manipuliert werden kann (zum Beispiel durch Zoomfunktionen, die im Browser integriert sind).

Standardmäßig werden Scroll- und Pinch-Zoom-Gesten ausschließlich vom Browser behandelt. Eine Anwendung, die Zeigerereignisse verwendet, erhält ein pointercancel-Ereignis, wenn der Browser beginnt, eine Touch-Geste zu behandeln. Indem Sie explizit angeben, welche Gesten vom Browser behandelt werden sollen, kann eine Anwendung ihr eigenes Verhalten in den pointermove- und pointerup-Listenern für die verbleibenden Gesten bereitstellen. Anwendungen, die Touch-Ereignisse verwenden, deaktivieren die Browserbehandlung von Gesten, indem sie preventDefault() aufrufen, sollten jedoch auch touch-action verwenden, um sicherzustellen, dass der Browser die Absicht der Anwendung kennt, bevor irgendwelche Ereignis-Listener aufgerufen wurden.

Wenn eine Geste begonnen wird, schneidet der Browser die touch-action-Werte des berührten Elements und seiner Vorfahren bis zu demjenigen, der die Geste implementiert (also das erste scrollbare übergeordnete Element), miteinander. Dies bedeutet, dass touch-action in der Praxis typischerweise nur auf oberste Elemente angewendet wird, die ein benutzerdefiniertes Verhalten haben, ohne dass touch-action explizit bei Nachfahren dieses Elements angegeben werden muss.

Hinweis: Nachdem eine Geste begonnen hat, haben Änderungen an touch-action keinen Einfluss mehr auf das Verhalten der aktuellen Geste.

Syntax

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;

Die touch-action-Eigenschaft kann entweder wie folgt angegeben werden:

  • Eines der Schlüsselwörter auto, none, manipulation, oder
  • Eines der Schlüsselwörter pan-x, pan-left, pan-right und/oder eines der Schlüsselwörter pan-y, pan-up, pan-down, plus optional das Schlüsselwort pinch-zoom.

Werte

auto

Ermöglicht die Browserbehandlung aller Scroll- und Zoom-Gesten.

none

Deaktiviert die Browserbehandlung aller Scroll- und Zoom-Gesten.

pan-x

Ermöglicht einhändige horizontale Scroll-Gesten. Kann mit pan-y, pan-up, pan-down und/oder pinch-zoom kombiniert werden.

pan-y

Ermöglicht einhändige vertikale Scroll-Gesten. Kann mit pan-x, pan-left, pan-right und/oder pinch-zoom kombiniert werden.

manipulation

Ermöglicht Scroll- und Pinch-Zoom-Gesten, deaktiviert jedoch zusätzliche nicht-standardisierte Gesten wie Doppeltippen zum Zoomen. Das Deaktivieren des Doppeltippens zum Zoomen beseitigt die Notwendigkeit, dass Browser die Erzeugung von klick-Ereignissen verzögern, wenn der Benutzer den Bildschirm berührt. Dies ist ein Alias für "pan-x pan-y pinch-zoom" (was aus Kompatibilitätsgründen selbst noch gültig ist).

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

Ermöglicht einhändige Gesten, die mit dem Scrollen in der angegebenen Richtung beginnen. Sobald das Scrollen begonnen hat, kann die Richtung dennoch umgekehrt werden. Beachten Sie, dass Scrollen "nach oben" (pan-up) bedeutet, dass der Benutzer seinen Finger nach unten auf der Bildschirmoberfläche bewegt, und pan-left bedeutet, dass der Benutzer seinen Finger nach rechts zieht. Mehrere Richtungen können kombiniert werden, außer wenn es eine einfachere Darstellung gibt (zum Beispiel ist "pan-left pan-right" ungültig, da "pan-x" einfacher ist, aber "pan-left pan-down" ist gültig).

pinch-zoom

Ermöglicht mehrhändige Scroll- und Zoom-Gesten der Seite. Dies kann mit allen pan- Werten kombiniert werden.

Barrierefreiheit

Eine Deklaration von touch-action: none; kann die Bedienung der Zoom-Funktionen eines Browsers behindern. Dies verhindert, dass Personen mit Sehbehinderungen Seiteninhalte lesen und verstehen können.

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente außer: nicht ersetzte Inlineelemente, Tabellenzeilen, Zeilengruppen, Tabellenspalten und Spaltengruppen
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

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

Beispiele

Deaktivieren aller Gesten

Die häufigste Verwendung besteht darin, alle Gesten auf einem Element (und seinen nicht scrollbaren Nachfahren), das sein eigenes Zieh- und Zoomverhalten bietet – wie eine Karte oder Spielfläche – zu deaktivieren.

HTML

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

CSS

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

Ergebnis

Spezifikationen

Specification
Compatibility
# touch-action
Pointer Events
# the-touch-action-css-property

Browser-Kompatibilität

Siehe auch