Verwenden von Touch Events

Schnittstellen

Touch Events bestehen aus drei Schnittstellen (Touch, TouchEvent und TouchList) und den folgenden Ereignistypen:

• touchstart - ausgelöst, wenn ein Berührungspunkt auf der Touch-Oberfläche platziert wird.
• touchmove - ausgelöst, wenn ein Berührungspunkt entlang der Touch-Oberfläche bewegt wird.
• touchend - ausgelöst, wenn ein Berührungspunkt von der Touch-Oberfläche entfernt wird.
• touchcancel - ausgelöst, wenn ein Berührungspunkt in einer implementationsspezifischen Weise gestört wurde (zum Beispiel, wenn zu viele Berührungspunkte erstellt wurden).

Die Schnittstelle Touch repräsentiert einen einzelnen Kontaktpunkt auf einem berührungsempfindlichen Gerät. Der Kontaktpunkt wird typischerweise als Berührungspunkt oder einfach nur Touch bezeichnet. Ein Touch wird normalerweise durch einen Finger oder Stift auf einem Touchscreen, Stift oder Trackpad erzeugt. Die Eigenschaften eines Berührungspunkts umfassen eine eindeutige Kennung, das Ziel-Element des Berührungspunkts sowie die X- und Y-Koordinaten der Position des Berührungspunkts relativ zum Ansichtsfenster, zur Seite und zum Bildschirm.

Die Schnittstelle TouchList repräsentiert eine Liste von Kontaktpunkten mit einer Touch-Oberfläche, wobei jeder Kontaktpunkt ein Element in der Liste darstellt. Berührt der Benutzer die Touch-Oberfläche mit einem Finger, enthält die Liste ein Element; berührt er die Oberfläche mit drei Fingern, beträgt die Listenlänge drei.

Die TouchEvent-Schnittstelle repräsentiert ein Ereignis, das gesendet wird, wenn sich der Zustand der Kontakte mit einer berührungsempfindlichen Oberfläche ändert. Die Zustandsänderungen umfassen das Starten des Kontakts mit einer Touch-Oberfläche, das Bewegen eines Berührungspunkts bei aufrechterhaltenem Kontakt mit der Oberfläche, das Loslassen eines Berührungspunkts und das Abbrechen eines Touch-Ereignisses. Die Attribute dieser Schnittstelle umfassen den Zustand mehrerer Modifier-Keys (wie z.B. die Shift-Taste) und die folgenden Touch-Listen:

• touches - eine Liste aller Berührungspunkte, die sich momentan auf dem Bildschirm befinden.
• targetTouches - eine Liste der Berührungspunkte auf dem Ziel-DOM-Element.
• changedTouches - eine Liste der Berührungspunkte, deren Elemente abhängig vom zugehörigen Ereignistyp sind:
  • Für das touchstart-Ereignis ist es eine Liste der Berührungspunkte, die mit dem aktuellen Ereignis aktiv wurden.
  • Für das touchmove-Ereignis ist es eine Liste der Berührungspunkte, die sich seit dem letzten Ereignis geändert haben.
  • Für das touchend-Ereignis ist es eine Liste der Berührungspunkte, die von der Oberfläche entfernt wurden (d.h. die Menge der Berührungspunkte, die zu Fingern gehören, die die Oberfläche nicht mehr berühren).

Diese Schnittstellen definieren zusammen einen relativ niedrigstufigen Satz von Funktionen, unterstützen jedoch viele Arten von touch-basierten Interaktionen, einschließlich der vertrauten Multitouch-Gesten wie Wischen mit mehreren Fingern, Drehen, Kneifen (Pinch) und Zoomen.

Von Schnittstellen zu Gesten

Eine Anwendung kann verschiedene Faktoren berücksichtigen, wenn sie die Semantik einer Geste definiert. Beispielsweise die Entfernung, die ein Berührungspunkt von seinem Startpunkt bis zu seinem Punkt zurückgelegt hat, als die Berührung endete. Ein weiterer möglicher Faktor ist die Zeit; zum Beispiel die verstrichene Zeit zwischen dem Beginn und dem Ende der Berührung oder die Zeitspanne zwischen zwei aufeinanderfolgenden Taps, die beabsichtigt sind, eine Doppeltap-Geste zu erstellen. Die Richtung eines Wischens (zum Beispiel von links nach rechts, von rechts nach links, etc.) ist ein weiterer Faktor, der berücksichtigt werden muss.

Die von einer Anwendung verwendeten Touch-Listen hängen von der Semantik der Gesten der Anwendung ab. Wenn eine Anwendung beispielsweise eine einzelne Touch-Eingabe (Tap) auf einem Element unterstützt, würde sie die Liste targetTouches im touchstart-Ereignishandler verwenden, um den Berührungspunkt auf eine anwendungsspezifische Weise zu verarbeiten. Wenn eine Anwendung das Wischen mit zwei Fingern für beliebige zwei Berührungspunkte unterstützt, wird sie die Liste changedTouches im touchmove-Ereignishandler verwenden, um zu bestimmen, ob sich zwei Berührungspunkte bewegt haben, und dann die Semantik dieser Geste auf eine anwendungsspezifische Weise umsetzen.

Browser senden typischerweise emulierte Maus- und Klickereignisse, wenn es nur einen aktiven Berührungspunkt gibt. Multitouch-Interaktionen, die zwei oder mehr aktive Berührungspunkte beinhalten, generieren normalerweise nur Touch Events. Um zu verhindern, dass die emulierten Mausereignisse gesendet werden, verwenden Sie die Methode preventDefault() in den Touch-Ereignishandlern. Wenn Sie sowohl mit Maus als auch mit Berührungen interagieren möchten, verwenden Sie stattdessen Pointer Events.

Grundlegende Schritte

Dieser Abschnitt enthält eine grundlegende Verwendung der oben genannten Schnittstellen. Sehen Sie sich den Überblick der Touch-Events für ein detaillierteres Beispiel an.

Registrieren Sie einen Ereignishandler für jeden Touch-Ereignistyp.

// Register touch event handlers
someElement.addEventListener("touchstart", process_touchstart);
someElement.addEventListener("touchmove", process_touchmove);
someElement.addEventListener("touchcancel", process_touchcancel);
someElement.addEventListener("touchend", process_touchend);

Verarbeiten Sie ein Ereignis in einem Ereignishandler und implementieren Sie die Gestensemantik der Anwendung.

// touchstart handler
function process_touchstart(ev) {
  // Use the event's data to call out to the appropriate gesture handlers
  switch (ev.touches.length) {
    case 1:
      handle_one_touch(ev);
      break;
    case 2:
      handle_two_touches(ev);
      break;
    case 3:
      handle_three_touches(ev);
      break;
    default:
      gesture_not_supported(ev);
      break;
  }
}

Greifen Sie auf die Attribute eines Berührungspunkts zu.

// Create touchstart handler
someElement.addEventListener("touchstart", (ev) => {
  // Iterate through the touch points that were activated
  // for this element and process each event 'target'
  for (const touch of ev.targetTouches) {
    process_target(touch.target);
  }
});

Verhindern Sie, dass der Browser emulierte Mausereignisse verarbeitet.

// touchmove handler
function process_touchmove(ev) {
  // Set call preventDefault()
  ev.preventDefault();
}

Beste Praktiken

Hier sind einige beste Praktiken, die bei der Verwendung von Touch Events zu beachten sind:

• Minimieren Sie die Arbeitsmenge, die in den Touch-Handlern ausgeführt wird.
• Fügen Sie die Berührungspunkt-Handler dem spezifischen Zielelement hinzu (anstatt dem gesamten Dokument oder höheren Knoten im Dokumentbaum).
• Fügen Sie die Ereignishandler für touchmove, touchend und touchcancel innerhalb von touchstart hinzu.
• Das Ziel-Touch-Element oder der Knoten sollten groß genug sein, um eine Berührung mit dem Finger aufzunehmen. Wenn der Zielbereich zu klein ist, könnte es beim Berühren dazu kommen, dass andere Ereignisse für benachbarte Elemente ausgelöst werden.

Implementierungs- und Bereitstellungsstatus

Die Browser-Kompatibilitätsdaten zu Touch-Events zeigen, dass die Unterstützung von Touch Events unter mobilen Browsern relativ breit ist, während die Unterstützung in Desktop-Browsern hinterherhinkt, obwohl zusätzliche Implementierungen in Arbeit sind.

Einige neue Funktionen bezüglich der Touch Area eines Berührungspunkts – der Kontaktbereich zwischen dem Benutzer und der Touch-Oberfläche – werden derzeit standardisiert. Zu den neuen Funktionen gehören der X- und Y-Radius der Ellipse, die den Kontaktbereich eines Berührungspunkts mit der Touch-Oberfläche am genauesten umschreibt. Auch der Rotationswinkel des Berührungspunkts – die Anzahl der Drehgrade, die auf die beschriebene Ellipse anzuwenden sind, um sie mit dem Kontaktbereich auszurichten – wird standardisiert, ebenso wie der Druck, der auf einen Berührungspunkt ausgeübt wird.

Was ist mit Pointer-Events?

Die Einführung neuer Eingabemechanismen führt zu einer erhöhten Komplexität der Anwendung, um verschiedene Eingabeereignisse wie Tastenereignisse, Mausereignisse, Stift- bzw. Stylus-Ereignisse und Touch-Events zu verarbeiten. Um diesem Problem zu begegnen, definiert die Pointer Events-API Ereignisse und zugehörige Schnittstellen zum Umgang mit hardware-agnostischen Pointer-Eingaben von Geräten wie Maus, Stift, Touchscreen usw. Das heißt, der abstrakte Pointer schafft ein einheitliches Eingabemodell, das einen Kontaktpunkt für Finger, Stift/Styles oder Maus darstellen kann.

Das Pointer-Event-Modell kann die Eingabeverarbeitung einer Anwendung vereinfachen, da ein Pointer Eingaben von beliebigen Eingabegeräten repräsentiert. Darüber hinaus ähneln die Pointer-Ereignistypen sehr den Maus-Ereignistypen (zum Beispiel pointerdown und pointerup), sodass der Code zur Behandlung von Pointer-Events dem Code zur Mausbehandlung sehr ähnlich ist.

Der Implementierungsstatus von Pointer-Events in Browsern ist relativ hoch mit vollständigen Implementierungen in Chrome, Firefox, IE11 und Edge.

Siehe auch

• Touch-Events
• Pointer-Events
• Fügen Sie Ihrer Website Touch hinzu auf web.dev
• Fügen Sie Ihrer Website Touchscreen-Unterstützung hinzu (Der einfache Weg)
• Paint-Programm von Rick Byers
• Touch/Pointer-Tests und Demos von Patrick H. Lauke
• Touch Events Community Group
• Mail-Verteiler
• W3C #touchevents IRC-Kanal