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

Anfangswert	`auto`
Anwendbar auf	alle Elemente außer: nicht ersetzte Inlineelemente, Tabellenzeilen, Zeilengruppen, Tabellenspalten und Spaltengruppen
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not 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

pointer-events
Zeigerereignisse
WebKit-Blog Schnelleres Tippen auf iOS
Google Developers Blog Scroll-Geschwindigkeit standardmäßig erhöhen
Scroll-Snap

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden