Dietouch-action-CSS-Eigenschaft legt fest, wie der Bereich eines Elements von einem Touchscreen-Benutzer manipuliert werden kann (zum Beispiel durch Zoom-Features, die im Browser integriert sind).

Standardmäßig werden Scroll- (Panning) und Pinch-Gesten ausschließlich vom Browser behandelt. Eine Anwendung, diePointer events verwendet, erhält einpointercancel-Ereignis, wenn der Browser beginnt, eine Touch-Geste zu behandeln. Indem ausdrücklich angegeben wird, welche Gesten vom Browser behandelt werden sollen, kann eine Anwendung ihr eigenes Verhalten inpointermove- undpointerup-Listenern für die verbleibenden Gesten bereitstellen. Anwendungen, dieTouch events verwenden, deaktivieren die Browserbehandlung von Gesten, indem siepreventDefault() aufrufen, sollten aber auchtouch-action verwenden, um sicherzustellen, dass der Browser die Absicht der Anwendung kennt, bevor irgendwelche Ereignis-Listener aufgerufen wurden.

Wenn eine Geste gestartet wird, schneidet der Browser dietouch-action-Werte des berührten Elements und seiner Vorfahren mit demjenigen, der die Geste implementiert (also das erste enthaltende Scroll-Element), ab. Das bedeutet, dasstouch-action in der Praxis typischerweise nur auf oberste Elemente angewendet wird, die ein eigenes Verhalten aufweisen, ohne dasstouch-action explizit auf Nachfahren dieses Elements angegeben werden muss.

Syntax

/* 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;

Dietouch-action-Eigenschaft kann entweder wie folgt angegeben werden:

• Eines der Schlüsselwörterauto,none,manipulation,oder
• Eines der Schlüsselwörterpan-x,pan-left,pan-right, und/oder eines der Schlüsselwörterpan-y,pan-up,pan-down, plus optional das Schlüsselwortpinch-zoom.

Werte

auto

Ermöglicht dem Browser die Behandlung aller Scroll- und Zoom-Gesten.

none

Deaktiviert die Behandlung aller Scroll- und Zoom-Gesten durch den Browser.

pan-x

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

pan-y

Ermöglicht einhändige vertikale Scroll-Gesten. Kann mitpan-x,pan-left,pan-right und/oderpinch-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 für Browser, die Erzeugung vonclick-Ereignissen zu 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 immer noch gültig ist).

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

Ermöglicht einhändige Gesten, die mit dem Scrollen in die angegebene(n) Richtung(en) 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 zieht, und ebenso bedeutetpan-left, 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

Aktiviert das Mehrfinger-Scrollen und Zoomen der Seite. Dies kann mit jeder derpan--Werte kombiniert werden.

Barrierefreiheit

Eine Deklaration vontouch-action: none; kann die Bedienung der Zoom-Funktionen eines Browsers behindern. Dies wird Menschen mit Sehbehinderungen davon abhalten, den Seiteninhalt zu lesen und zu verstehen.

• MDN Verständnis von WCAG, Leitlinie 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.4 | Verständnis von WCAG 2.0

Formale Definition

Formale Syntax

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

Beispiele

Deaktivierung aller Gesten

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

HTML

<div></div>

CSS

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• pointer-events
• Pointer Events
• WebKit-BlogMehr reaktionsschnelles Tippen auf iOS
• Google Entwickler-BlogStandardmäßig schnelles Scrollen durch Berührung
• Scroll Snap