Berührungsaktion - CSS-Tricks

Anonim

Mit der touch-actionEigenschaft in CSS können Sie den Effekt von Touchscreen-Interaktionen mit einem Element steuern, ähnlich der häufiger verwendeten pointer-eventsEigenschaft zur Steuerung von Mausinteraktionen.

#element ( touch-action: pan-right pinch-zoom; )

Die touch-actionEigenschaft ist vor allem für interaktive Benutzeroberflächenelemente nützlich, die je nach verwendetem Gerätetyp ein leicht unterschiedliches Verhalten erfordern. Wenn Ihre Benutzer erwarten, dass sich ein Element mit einer Maus auf eine bestimmte Weise verhält, und wenn sich ein Touchscreen etwas anders verhält, touch-actionist dies hilfreich.

Das offensichtlichste Beispiel hierfür ist ein interaktives Kartenelement. Wenn Sie jemals eine Karte angezeigt haben, die nicht für die Verwendung mit Touch-Geräten ausgelegt ist, haben Sie wahrscheinlich versucht, nur zu kneifen und zu zoomen, um den Browser zu finden, der das Element vergrößert, aber die tatsächliche Karte nicht tatsächlich zu zoomen.

Standardmäßig verarbeitet ein Browser Berührungsinteraktionen automatisch: Zum Zoomen kneifen, zum Scrollen streichen usw. Mit der Einstellung touch-actionauf nonewird die gesamte Browserbehandlung dieser Ereignisse deaktiviert, sodass Sie sie implementieren können (über JavaScript). Wenn Sie nur eine Interaktion übernehmen möchten, weisen Sie den Browser an, den Rest zu erledigen. Wenn Sie beispielsweise JavaScript geschrieben haben, das nur das Zoomen behandelt, können Sie den Browser anweisen, alles andere mit dieser Eigenschaft zu behandeln : touch-action: pan-x pan-y;.

Sehen Sie sich die Stiftbeispiele für Touch-Action von CSS-Tricks (@ css-Tricks) auf CodePen an.

Syntax

touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulation

Werte

Die touch-actionEigenschaft akzeptiert die folgenden Werte:

  • auto: Ermöglicht dem Browser, alle Schwenk- und Zoom-Interaktionen zu verarbeiten.
  • none: Verhindert, dass Browser alle Schwenk- und Zoom-Interaktionen verarbeiten. Dies eröffnet die Möglichkeit, diese Interaktionen in JavaScript benutzerdefiniert zu definieren.
  • pan-x: Aktiviert das horizontale Schwenken mit einer einzigen Fingerinteraktion. Es ist für die Kurz pan-leftund pan-rightWerte, kann aber mit in Kombination verwendet werden pan-y, pan-up, pan-downund pinch-zoom.
  • pan-yAktiviert das vertikale Schwenken mit einer einzigen Fingerinteraktion. Es ist für die Kurz pan-upund pan-downWerte, kann aber mit in Kombination verwendet werden pan-x, pan-left, pan-rightund pinch-zoom.
  • manipulation: Aktiviert Pinch- und Zoom-Interaktionen, deaktiviert jedoch andere, die Sie möglicherweise auf einigen Geräten finden, z. B. zweimaliges Tippen zum Zoomen. Es ist eine Abkürzung für die Kombination von pan-x pan-y pinch-zoom.
  • pan-left (Experimentell): Aktiviert eine Interaktion mit einem Finger, wenn sich der Finger eines Benutzers nach rechts bewegt und nach links schwenkt.
  • pan-right (Experimentell): Aktiviert eine Interaktion mit einem Finger, wenn sich der Finger eines Benutzers nach links bewegt und nach rechts schwenkt.
  • pan-down (Experimentell): Aktiviert eine Interaktion mit einem Finger, wenn sich der Finger eines Benutzers nach oben bewegt und nach unten schwenkt.
  • pan-up (Experimentell): Aktiviert eine Interaktion mit einem Finger, wenn sich der Finger eines Benutzers nach unten bewegt und nach oben schwenkt.
  • pinch-zoom: Aktiviert Mehrfinger-Interaktionen und kann mit jedem anderen pan-Wert kombiniert werden.

verbunden

  • pointer-events

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
36 52 10 * 12 Nein

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 13.0-13.1

Safari ist das eklatante Auslassen der Unterstützung für Berührungsaktionen. iOs Safari bietet nur begrenzte Unterstützung für die Werte autound manipulation.

zusätzliche Information

  • Spezifikation für Zeigerereignisse der Stufe 2 - Die Spezifikation befindet sich derzeit in der Kandidatenempfehlung, soll jedoch zum Zeitpunkt dieses Schreibens Anfang 2019 zur vorgeschlagenen Empfehlung übergehen. Das Dokument soll eine offizielle W3C-Empfehlung werden.
  • MDN-Dokumentation
  • Beispiel für eine CSS-Eigenschaft mit Pinch-Zoom-Touch-Aktion - Google Chrome-Demo seiner Implementierung.
  • WebKit Bugzilla Ticket # 133112 - Öffnen Sie das Ticket, um Safari-Unterstützung vorzuschlagen. Fügen Sie Ihre Stimme hinzu, um sie zu verbessern.