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 Zoom-Features, die im Browser integriert sind).
Standardmäßig werden Scroll- (Panning) und Pinch-Gesten ausschließlich vom Browser behandelt. Eine Anwendung, die Pointer events verwendet, erhält ein pointercancel-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 in pointermove- und pointerup-Listenern für die verbleibenden Gesten bereitstellen. Anwendungen, die Touch events verwenden, deaktivieren die Browserbehandlung von Gesten, indem sie preventDefault() aufrufen, sollten aber auch touch-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 die touch-action-Werte des berührten Elements und seiner Vorfahren mit demjenigen, der die Geste implementiert (also das erste enthaltende Scroll-Element), ab. Das bedeutet, dass touch-action in der Praxis typischerweise nur auf oberste Elemente angewendet wird, die ein eigenes Verhalten aufweisen, ohne dass touch-action explizit auf Nachfahren dieses Elements angegeben werden muss.
Hinweis:
Nachdem eine Geste gestartet wurde, werden Änderungen an touch-action keine Auswirkungen auf das Verhalten der aktuellen Geste haben.
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;
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ö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 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 für Browser, die Erzeugung von click-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 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-
Aktiviert das Mehrfinger-Scrollen und Zoomen der Seite. Dies kann mit jeder der pan--Werte kombiniert werden.
Barrierefreiheit
Eine Deklaration von touch-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.
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
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 id="map"></div>
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- Pointer Events
- WebKit-Blog Mehr reaktionsschnelles Tippen auf iOS
- Google Entwickler-Blog Standardmäßig schnelles Scrollen durch Berührung
- Scroll Snap