Verwenden von Touch-Events

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

• touchstart - wird ausgelöst, wenn ein Berührungspunkt auf die Touch-Oberfläche gesetzt wird.
• touchmove - wird ausgelöst, wenn ein Berührungspunkt über die 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 unterbrochen wurde (zum Beispiel, wenn zu viele Berührungspunkte erstellt werden).

Die Touch Schnittstelle repräsentiert einen einzigen Berührungspunkt auf einem berührungsempfindlichen Gerät. Der Berührungspunkt wird typischerweise als touch point oder einfach als touch bezeichnet. Eine Berührung wird normalerweise durch einen Finger oder Stylus auf einem Touchscreen, Stift oder Trackpad erzeugt. Ein Berührungspunkt hat Eigenschaften wie eine eindeutige Kennung, das Zielelement des Berührungspunkts sowie die X- und Y-Koordinaten der Position des Berührungspunkts relativ zum Ansichtsfenster, zur Seite und zum Bildschirm.

Die TouchList Schnittstelle repräsentiert eine Liste von Berührungspunkten auf einer Touch-Oberfläche, jeweils ein Berührungspunkt pro Kontakt. Wenn der Benutzer die Touch-Oberfläche mit einem Finger aktiviert, enthält die Liste ein Element, und wenn der Benutzer die Oberfläche mit drei Fingern berührt, 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 sind das Herstellen eines Kontakts mit einer Touch-Oberfläche, das Bewegen eines Berührungspunkts bei bestehendem Kontakt mit der Oberfläche, das Loslassen eines Berührungspunkts und das Abbrechen eines Touch-Ereignisses. Zu den Attributen dieser Schnittstelle zählen der Zustand verschiedener Modifikatortasten (zum Beispiel die Shift-Taste) und die folgenden Touch-Listen:

• touches - eine Liste aller aktuell auf dem Bildschirm vorhandenen Berührungspunkte.
• targetTouches - eine Liste der Berührungspunkte auf dem Ziel-DOM-Element.
• changedTouches - eine Liste der Berührungspunkte, deren Elemente vom zugehörigen Ereignistyp abhängen:
  • 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 (das heißt, die Menge der Berührungspunkte, die zu Fingern gehören, die die Oberfläche nicht mehr berühren).

Zusammen definieren diese Schnittstellen eine relativ niederschwellige Sammlung von Funktionen, die dennoch viele Arten von touch-basierten Interaktionen unterstützen, einschließlich der bekannten Mehrfach-Touch-Gesten wie Mehrfinger-Wischen, Drehen, Kneifen und Zoomen.

Eine Anwendung kann verschiedene Faktoren berücksichtigen, wenn sie die Bedeutung einer Geste definiert. Zum Beispiel die Entfernung, die ein Berührungspunkt von seinem Ausgangspunkt zu seinem Ort bei der Beendigung des Touchs zurückgelegt hat. Ein weiterer potenzieller Faktor ist die Zeit; zum Beispiel die verstrichene Zeit zwischen dem Start und dem Ende des Touchs oder das Zeitintervall zwischen zwei aufeinander folgenden Berührungen, die eine Doppelberührungsgeste erzeugen 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 verwendeten Touch-Listen hängen von der Semantik der Gesten der Anwendung ab. Wenn eine Anwendung beispielsweise eine Einzelberührung (Tap) auf einem Element unterstützt, würde sie die targetTouches Liste im touchstart Ereignishandler verwenden, um den Berührungspunkt auf eine anwendungsspezifische Weise zu verarbeiten. Wenn eine Anwendung eine Zwei-Finger-Wischbewegung für beliebige zwei Berührungspunkte unterstützt, verwendet sie die changedTouches Liste im touchmove Ereignishandler, um zu bestimmen, ob sich zwei Berührungspunkte bewegt haben, und implementiert dann die Semantik dieser Geste in einer anwendungsspezifischen Weise.

Browser versenden in der Regel emulierte Maus- und Klickereignisse, wenn es nur einen aktiven Berührungspunkt gibt. Mehrfach-Touch-Interaktionen, die zwei oder mehr aktive Berührungspunkte umfassen, erzeugen normalerweise nur Touch-Events. Um zu verhindern, dass die emulierten Mausereignisse gesendet werden, verwenden Sie die preventDefault() Methode in den Touch-Ereignishandlern. Wenn Sie sowohl Maus- als auch Touch-Interaktionen wünschen, verwenden Sie stattdessen Pointer-Events.

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

Registrieren Sie einen Ereignishandler für jeden Typ von Touch-Ereignis.

// 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 Ereignis in einem Ereignishandler und setzen Sie die Geste der Anwendung um.

// 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);
    }
  },
  false,
);

Verhindern Sie, dass der Browser emulierte Mausereignisse verarbeitet.

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

Hier sind einige bewährte Praktiken zu beachten, wenn Sie Touch-Events verwenden:

• Minimieren Sie die Arbeitsmenge, die in den Touch-Handlern ausgeführt wird.
• Fügen Sie die Handler für die Berührungspunkte dem spezifischen Zielelement hinzu (und nicht dem gesamten Dokument oder Knoten weiter oben im Dokumentenbaum).
• Fügen Sie touchmove, touchend und touchcancel Ereignishandler innerhalb des touchstart hinzu.
• Das Ziel-Touch-Element oder der -Knoten sollte groß genug sein, um eine Berührung eines Fingers aufzunehmen. Wenn der Zielbereich zu klein ist, könnte eine Berührung dazu führen, dass andere Ereignisse 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 hoch ist, während die Unterstützung bei Desktop-Browsern hinterherhinkt, obwohl weitere Implementierungen in Arbeit sind.

Einige neue Funktionen in Bezug auf den berührungspunktbezogenen Bereich - der Bereich des Kontakts zwischen dem Benutzer und der Touch-Oberfläche - befinden sich im Prozess der Standardisierung. Zu den neuen Funktionen gehören der X- und Y-Radius der Ellipse, die den Berührungsbereich eines Berührungspunkts mit der Touch-Oberfläche am engsten umschreibt. Der Rotationswinkel des Berührungspunkts - die Anzahl der Rotationsgrade, die auf die beschriebene Ellipse angewendet werden müssen, um sich mit dem Kontaktbereich auszurichten - wird ebenfalls standardisiert, ebenso wie der ausgeübte Druck auf einen Berührungspunkt.

Die Einführung neuer Eingabemechanismen führt zu einer erhöhten Komplexität der Anwendungen, um verschiedene Eingabeereignisse zu verarbeiten, wie z.B. Tastenereignisse, Mausereignisse, Stift-/Stylus-Ereignisse und Touch-Events. Um dieses Problem zu adressieren, definiert die Pointer-Events API Ereignisse und zugehörige Schnittstellen zur Verarbeitung von hardwareunabhängiger Zeigereingabe von Geräten, einschließlich Maus, Stift, Touchscreen usw. Das heißt, der abstrakte Zeiger schafft ein einheitliches Eingabemodell, das einen Kontaktpunkt für Finger, Stift/Zeichenstift oder Maus darstellen kann.

Das Zeigerereignismodell kann die Eingabeverarbeitung einer Anwendung vereinfachen, da ein Zeiger Eingaben von jedem Eingabegerät repräsentiert. Zusätzlich sind die Zeigerereignistypen den Mausereignistypen sehr ähnlich (zum Beispiel pointerdown und pointerup), sodass der Code zur Bearbeitung von Zeigerereignissen dem Code zur Mausbearbeitung sehr ähnlich ist.

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

• Touch-Events
• Pointer-Events
• Hinzufügen von Touch-Funktionalität zu Ihrer Website auf web.dev
• Hinzufügen von Touchscreen-Unterstützung zu Ihrer Website (Der einfache Weg)
• Malprogramm von Rick Byers
• Touch/Pointer Tests und Demos von Patrick H. Lauke
• Touch-Events Community Group
• Mail-Liste
• W3C #touchevents IRC-Kanal