1. Web
  2. CSS
  3. Reference
  4. Properties
  5. touch-action

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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 Touchscreen-Benutzer manipuliert werden kann (zum Beispiel durch Einzoomen, das im Browser eingebaut ist).

Standardmäßig werden Scroll- und Zoomgesten ausschließlich vom Browser verarbeitet. Eine Anwendung, die Pointer-Ereignisse verwendet, erhält ein pointercancel-Ereignis, wenn der Browser beginnt, eine Touch-Geste zu verarbeiten. Durch die explizite Angabe, welche Gesten vom Browser behandelt werden sollen, kann eine Anwendung ihr eigenes Verhalten in den pointermove- und pointerup-Ereignislistenern für die verbleibenden Gesten bereitstellen. Anwendungen, die Touch-Ereignisse verwenden, deaktivieren die Verarbeitung von Gesten durch den Browser, indem sie preventDefault() aufrufen, sollten aber auch touch-action verwenden, um sicherzustellen, dass der Browser die Absicht der Anwendung versteht, bevor eventuelle Ereignislistener aufgerufen werden.

Wenn eine Geste gestartet wird, schneidet der Browser die touch-action-Werte des berührten Elements und seiner Vorfahren bis zu demjenigen, das die Geste implementiert (mit anderen Worten, das erste enthaltende Scroll-Element), ab. Das bedeutet, dass touch-action in der Praxis typischerweise nur auf oberste Elemente angewandt wird, die ein eigenes Verhalten haben, ohne dass touch-action explizit auf den Nachkommen dieses Elements angegeben werden muss.

Hinweis: Nach dem Beginn einer Geste haben Änderungen an touch-action keinen Einfluss 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 festgelegt werden als:

  • 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 Verarbeitung aller Scroll- und Zoomgesten durch den Browser.

none

Deaktiviert die Verarbeitung aller Scroll- und Zoomgesten durch den Browser.

pan-x

Ermöglicht horizontale Scrollgesten mit einem Finger. Kann mit pan-y, pan-up, pan-down und/oder pinch-zoom kombiniert werden.

pan-y

Ermöglicht vertikale Scrollgesten mit einem Finger. Kann mit pan-x, pan-left, pan-right und/oder pinch-zoom kombiniert werden.

manipulation

Ermöglicht Scroll- und Pinch-Zoom-Gesten, deaktiviert aber zusätzliche nicht standardisierte Gesten wie Doppeltippen zum Zoomen. Durch das Deaktivieren von Doppeltippen zum Zoomen wird verhindert, 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 für die Kompatibilität nach wie vor gültig ist).

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

Erlauben Ein-Finger-Gesten, die durch Scrollen in die angegebenen Richtungen 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 bedeutet pan-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

Erlaubt Mehrfinger-Scrollen und -Zoomen der Seite. Dies kann mit jedem der pan- Werte kombiniert werden.

Barrierefreiheit

Eine Deklaration von touch-action: none; kann verhindern, dass die Zoom-Funktion des Browsers genutzt wird. Dies verhindert, dass Personen mit Sehschwäche in der Lage sind, die Seiteninhalte zu lesen und zu verstehen.

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
Diese Syntax spiegelt den neuesten Standard gemäß Compatibility wider. Möglicherweise haben nicht alle Browser jeden Teil implementiert. Siehe Browserkompatibilität für Informationen zur Unterstützung.

Beispiele

Deaktivieren aller Gesten

Die häufigste Verwendung ist das Deaktivieren aller Gesten auf einem Element (und seinen nicht scrollbaren Nachkommen), das über ein eigenes Dragging- und Zoom-Verhalten verfügt – wie eine Karte oder Spielfläche.

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden