Verwendung von Touch Events

Touch Events bestehen aus drei Schnittstellen (Touch, TouchEvent und TouchList) und den folgenden Event-Typen:

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

Die Touch-Schnittstelle stellt einen einzelnen Kontaktpunkt auf einem berührungsempfindlichen Gerät dar. Der Kontaktpunkt wird typischerweise als Berührungspunkt oder einfach als Touch bezeichnet. Eine Berührung wird normalerweise von einem Finger oder Stylus 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 Viewport, zur Seite und zum Bildschirm.

Die TouchList-Schnittstelle stellt eine Liste von Kontaktpunkten mit einer Touch-Oberfläche dar, einen Berührungspunkt pro Kontakt. Wenn der Benutzer die Touch-Oberfläche mit einem Finger aktiviert, würde die Liste also einen Eintrag enthalten, und wenn der Benutzer die Oberfläche mit drei Fingern berührt, wäre die Listenlänge drei.

Die TouchEvent-Schnittstelle stellt ein Event dar, das gesendet wird, wenn sich der Zustand der Kontakte mit einer berührungsempfindlichen Oberfläche ändert. Die Zustandsänderungen umfassen den Start des Kontakts mit einer Touch-Oberfläche, das Bewegen eines Berührungspunkts bei Kontakt mit der Oberfläche, das Loslassen eines Berührungspunkts und das Abbrechen eines Touch-Events. Zu den Attributen dieser Schnittstelle gehören der Zustand mehrerer Modifikatortasten (zum Beispiel die Umschalt-Taste) sowie die folgenden Touch-Listen:

• touches - eine Liste aller aktuell auf dem Bildschirm befindlichen Berührungspunkte.

• targetTouches - eine Liste der Berührungspunkte auf dem Ziel-DOM-Element.

• changedTouches - eine Liste der Berührungspunkte, deren Einträge vom zugehörigen Event-Typ abhängen:

  • Für das touchstart Event ist es eine Liste der Berührungspunkte, die mit dem aktuellen Ereignis aktiv geworden sind.
  • Für das touchmove Event ist es eine Liste der Berührungspunkte, die sich seit dem letzten Event geändert haben.
  • Für das touchend Event ist es eine Liste der Berührungspunkte, die von der Oberfläche entfernt wurden (das heißt, die Menge der Berührungspunkte, die den Fingern entsprechen, die nicht mehr die Oberfläche berühren).

Zusammen definieren diese Schnittstellen eine relativ niedrige Ebene von Funktionen, die jedoch viele Arten von berührungsbasierten Interaktionen unterstützen, einschließlich der vertrauten Multi-Touch-Gesten wie Mehrfingerwisch, Rotieren, Kneifen und Zoomen.

Eine Anwendung kann unterschiedliche Faktoren berücksichtigen, wenn sie die Semantiken einer Geste definiert. Beispielsweise die Entfernung, die ein Berührungspunkt von seiner Ausgangsposition bis zu seiner Position beim Ende der Berührung zurückgelegt hat. Ein weiterer potenzieller Faktor ist die Zeit; zum Beispiel die Zeit, die zwischen dem Beginn und dem Ende der Berührung verstrichen ist, oder das Zeitintervall zwischen zwei aufeinanderfolgenden Taps, die einen Doppeltipp darstellen sollen. Die Richtung eines Wischens (zum Beispiel von links nach rechts, von rechts nach links usw.) ist ein weiterer zu berücksichtigender Faktor.

Die von einer Anwendung verwendete(n) Touchliste(n) hängt von der Semantik der Gesten der Anwendung ab. Beispielsweise würde eine Anwendung, die einen einzelnen Touch (Tap) auf einem Element unterstützt, die targetTouches-Liste im touchstart-Event-Handler verwenden, um den Berührungspunkt auf anwendungsspezifische Weise zu verarbeiten. Unterstützt eine Anwendung einen Zwei-Finger-Wisch für zwei beliebige Berührungspunkte, verwendet sie die changedTouches-Liste im touchmove-Event-Handler, um festzustellen, ob sich zwei Berührungspunkte bewegt haben, und implementiert dann die Semantik dieser Geste auf anwendungsspezifische Weise.

Browser senden normalerweise emulierte Maus- und Klick-Events, wenn nur ein einziger aktiver Berührungspunkt vorhanden ist. Multi-Touch-Interaktionen mit zwei oder mehr aktiven Berührungspunkten erzeugen normalerweise nur Touch-Events. Um zu verhindern, dass die emulierten Mausevents gesendet werden, verwenden Sie die preventDefault()-Methode in den Touch-Event-Handlern. Wenn Sie sowohl mit Maus als auch mit Berührungen interagieren möchten, verwenden Sie stattdessen Pointer Events.

Dieser Abschnitt enthält eine grundlegende Verwendung der oben genannten Schnittstellen. Weitere Details finden Sie in der Touch-Events-Übersicht.

Registrieren Sie einen Event-Handler für jeden Touch-Event-Typ.

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

Verarbeiten Sie ein Event in einem Event-Handler, indem Sie die Semantik der Geste der Anwendung umsetzen.

// 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 (let i = 0; i < ev.targetTouches.length; i++) {
      process_target(ev.targetTouches[i].target);
    }
  },
  false,
);

Verhindern Sie, dass der Browser emulierte Mausevents verarbeitet.

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

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

• Minimieren Sie die Menge an Arbeit, die in den Touch-Handlern durchgeführt wird.
• Fügen Sie die Berührungspunkthandler dem spezifischen Zielelement hinzu (anstatt dem gesamten Dokument oder Knoten weiter oben im Dokumentbaum).
• Fügen Sie touchmove, touchend und touchcancel-Event-Handler innerhalb des touchstart hinzu.
• Das Zieltouch-Element oder der -Knoten sollte groß genug sein, um eine Fingerberührung aufzunehmen. Wenn der Zielbereich zu klein ist, könnte das Berühren dazu führen, dass andere Events für angrenzende Elemente ausgelöst werden.

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

Einige neue Funktionen bezüglich des Touch-Bereichs 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 besten umschreiben. Auch der Rotationswinkel des Berührungspunkts - die Anzahl an Drehgraden, die auf die beschriebene Ellipse angewendet wird, um sich mit dem Kontaktbereich auszurichten - sowie der auf einen Berührungspunkt ausgeübte Druck werden standardisiert.

Die Einführung neuer Eingabemechanismen führt zu gesteigerter Komplexität einer Anwendung, um verschiedene Eingabeereignisse zu handhaben, wie zum Beispiel Tastenevents, Mausevents, Stift-/Stylusevents und Touch-Events. Um dieses Problem zu adressieren, definiert der Pointer Events-Standard Ereignisse und zugehörige Schnittstellen für die Handhabung hardware-agnostischer Zeigereingaben von Geräten, einschließlich Maus, Stift, Touchscreen, usw.. Das heißt, der abstrakte Zeiger schafft ein einheitliches Eingabemodell, das einen Kontaktpunkt für einen Finger, Stift/ Stylus oder Maus darstellen kann. Siehe den MDN-Artikel zu Pointer Events.

Das Zeigereignismodell kann die Eingabeverarbeitung einer Anwendung vereinfachen, da ein Zeiger die Eingabe von jedem Eingabegerät repräsentiert. Zusätzlich sind die Typen von Zeigereignissen den Typen von Mausevents sehr ähnlich (zum Beispiel pointerdown und pointerup), sodass der Code zur Handhabung von Zeigereignissen dem zur Maussteuerung sehr ähnlich ist.

Der Implementierungsstatus von Zeigereignissen in Browsern ist relativ hoch, wobei Chrome, Firefox, IE11 und Edge vollständige Implementierungen haben.

Die folgenden Dokumente beschreiben, wie man Touch-Events verwendet und enthalten Beispielcode:

• Touch-Events-Übersicht
• Individuelle Gesten implementieren
• Touchscreen-Unterstützung zu Ihrer Website hinzufügen (Der einfache Weg)

Touch-Event-Demonstrationen:

• Malprogramm (von Rick Byers)
• Touch-/Zeiger-Tests und Demos (von Patrick H. Lauke)

• Touch Events Community Group
• Mailingliste
• W3C #touchevents IRC-Kanal

• Pointer Events Standard