TouchEvent

Die TouchEvent-Schnittstelle stellt ein UIEvent dar, das gesendet wird, wenn sich der Zustand der Berührungspunkte mit einer berührungsempfindlichen Oberfläche ändert. Diese Oberfläche kann z. B. ein Touchscreen oder ein Trackpad sein. Das Ereignis kann einen oder mehrere Berührungspunkte mit dem Bildschirm beschreiben und bietet Unterstützung für die Erkennung von Bewegungen, Hinzufügungen und Entfernungen von Berührungspunkten und so weiter.

Berührungen werden durch das Touch-Objekt dargestellt; jede Berührung wird durch eine Position, Größe und Form, den Druck und das Ziel-Element beschrieben. Listen von Berührungen werden durch TouchList-Objekte dargestellt.

Event UIEvent TouchEvent

Konstruktor

TouchEvent()

Erstellt ein TouchEvent-Objekt.

Instanz-Eigenschaften

Diese Schnittstelle erbt Eigenschaften von ihrem Elternteil, UIEvent und Event.

TouchEvent.altKey Nur lesbar

Ein boolescher Wert, der angibt, ob die Alt-Taste gedrückt war, als das Berührungsereignis ausgelöst wurde.

TouchEvent.changedTouches Nur lesbar

Eine TouchList von allen Touch-Objekten, die einzelne Berührungspunkte darstellen, deren Zustände sich zwischen dem vorherigen Berührungsereignis und diesem geändert haben.

TouchEvent.ctrlKey Nur lesbar

Ein boolescher Wert, der angibt, ob die Steuertaste gedrückt war, als das Berührungsereignis ausgelöst wurde.

TouchEvent.metaKey Nur lesbar

Ein boolescher Wert, der angibt, ob die Meta-Taste gedrückt war, als das Berührungsereignis ausgelöst wurde.

TouchEvent.shiftKey Nur lesbar

Ein boolescher Wert, der angibt, ob die Umschalt-Taste gedrückt war, als das Berührungsereignis ausgelöst wurde.

TouchEvent.targetTouches Nur lesbar

Eine TouchList von allen Touch-Objekten, die sowohl derzeit in Kontakt mit der Berührungsoberfläche sind als auch auf demselben Element gestartet wurden, das das Ziel des Ereignisses ist.

TouchEvent.touches Nur lesbar

Eine TouchList von allen Touch-Objekten, die alle aktuellen Berührungspunkte mit der Oberfläche darstellen, unabhängig von Ziel oder geändertem Status.

TouchEvent.rotation Nicht standardisiert Nur lesbar

Änderung der Rotation (in Grad) seit Beginn des Ereignisses. Positive Werte zeigen eine Drehung im Uhrzeigersinn an; negative Werte eine Drehung gegen den Uhrzeigersinn. Anfangswert: 0.0.

TouchEvent.scale Nicht standardisiert Nur lesbar

Abstand zwischen zwei Punkten seit Beginn des Ereignisses. Ausgedrückt als Gleitkommazahl, die das Vielfache des anfänglichen Abstands zwischen den Punkten zu Beginn des Ereignisses darstellt. Werte unter 1,0 deuten auf ein Hinzuziehen (Herauszoomen) hin. Werte über 1,0 deuten auf ein Auseinanderziehen (Hereinzoomen) hin. Anfangswert: 1.0.

Berührungsereignistypen

Es gibt mehrere Arten von Ereignissen, die ausgelöst werden können, um darauf hinzuweisen, dass sich berührungsbezogene Änderungen ereignet haben. Sie können bestimmen, welches dieser Ereignisse eingetreten ist, indem Sie die TouchEvent.type-Eigenschaft des Ereignisses betrachten.

touchstart

Wird gesendet, wenn der Benutzer einen Berührungspunkt auf die Berührungsoberfläche legt. Das Ziel des Ereignisses ist das element, in dem die Berührung stattgefunden hat.

touchend

Wird gesendet, wenn der Benutzer einen Berührungspunkt von der Oberfläche entfernt; das heißt, wenn er einen Finger oder Stift von der Oberfläche hebt. Dies wird auch gesendet, wenn der Berührungspunkt vom Rand der Oberfläche verschoben wird; z. B. wenn der Finger des Benutzers über den Rand des Bildschirms gleitet.

Das Ziel des Ereignisses ist dasselbe element, das das touchstart-Ereignis für den Berührungspunkt empfangen hat, selbst wenn der Berührungspunkt außerhalb dieses Elements verschoben wurde.

Die Berührungspunkte, die von der Oberfläche entfernt wurden, finden sich in der TouchList, die durch das changedTouches-Attribut angegeben ist.

touchmove

Wird gesendet, wenn der Benutzer einen Berührungspunkt entlang der Oberfläche bewegt. Das Ziel des Ereignisses ist dasselbe element, das das touchstart-Ereignis für den Berührungspunkt empfangen hat, selbst wenn der Berührungspunkt außerhalb dieses Elements verschoben wurde.

Dieses Ereignis wird auch gesendet, wenn sich die Werte des Radius, des Drehwinkels oder der Kraftattribute eines Berührungspunktes ändern.

Hinweis: Die Rate, mit der touchmove-Ereignisse gesendet werden, ist browserabhängig und kann auch je nach Fähigkeit der Hardware des Benutzers variieren. Sie dürfen sich nicht auf eine spezifische Granularität dieser Ereignisse verlassen.

touchcancel

Wird gesendet, wenn ein Berührungspunkt auf irgendeine Weise unterbrochen wurde. Es gibt mehrere mögliche Gründe, warum dies passieren könnte (und die genauen Gründe variieren je nach Gerät und Browser):

  • Ein Ereignis irgendeiner Art ist aufgetreten, das die Berührung abgebrochen hat; dies könnte passieren, wenn während der Interaktion ein modaler Alarm angezeigt wird.
  • Der Berührungspunkt hat das Dokumentfenster verlassen und sich in den Browser-UI-Bereich, ein Plugin oder andere externe Inhalte bewegt.
  • Der Benutzer hat mehr Berührungspunkte auf den Bildschirm gelegt, als unterstützt werden können, in welchem Fall die früheste Touch in der TouchList abgebrochen wird.

Verwendung mit addEventListener() und preventDefault()

Es ist wichtig zu beachten, dass in vielen Fällen sowohl Berührungs- als auch Mausereignisse gesendet werden (um nicht berührungsspezifischem Code die Interaktion mit dem Benutzer zu ermöglichen). Wenn Sie Berührungsereignisse verwenden, sollten Sie preventDefault() aufrufen, um zu verhindern, dass das Mausereignis ebenfalls gesendet wird.

Die Ausnahme hierzu bildet Chrome ab Version 56 (Desktop, Chrome für Android und Android WebView), bei dem der Standardwert für die passive-Option für touchstart und touchmove true ist und Aufrufe von preventDefault() keine Wirkung haben. Um dieses Verhalten zu überschreiben, müssen Sie die passive-Option auf false setzen, danach funktioniert der Aufruf von preventDefault() wie angegeben. Die Änderung, Listener standardmäßig als passive zu behandeln, verhindert, dass der Listener das Seitenrendering blockiert, während ein Benutzer scrollt. Eine Demo ist auf der Chrome Developer-Seite verfügbar.

Beispiel

Spezifikationen

Specification
Touch Events
# touchevent-interface

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch