TouchEvent

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die TouchEvent-Schnittstelle stellt ein UIEvent dar, das gesendet wird, wenn sich der Zustand von Kontakten mit einer berührungsempfindlichen Oberfläche ändert. Diese Oberfläche kann beispielsweise ein Touchscreen oder ein Trackpad sein. Das Ereignis kann einen oder mehrere Berührungspunkte mit dem Bildschirm beschreiben und unterstützt die Erkennung von Bewegungen, das Hinzufügen und Entfernen von Berührungspunkten usw.

Berührungen werden durch das Touch-Objekt dargestellt; jede Berührung wird durch eine Position, Größe und Form, einen Druckbetrag und ein Ziel-Element beschrieben. Listen von Berührungen werden durch TouchList-Objekte repräsentiert.

Event UIEvent TouchEvent

Konstruktor

TouchEvent()

Erstellt ein TouchEvent-Objekt.

Instanz-Eigenschaften

Diese Schnittstelle erbt Eigenschaften von ihren Eltern, UIEvent und Event.

TouchEvent.altKey Schreibgeschützt

Ein boolescher Wert, der anzeigt, ob die Alt-Taste gedrückt war, als das Touch-Ereignis ausgelöst wurde.

TouchEvent.changedTouches Schreibgeschützt

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

TouchEvent.ctrlKey Schreibgeschützt

Ein boolescher Wert, der anzeigt, ob die Steuerungstaste gedrückt war, als das Touch-Ereignis ausgelöst wurde.

TouchEvent.metaKey Schreibgeschützt

Ein boolescher Wert, der anzeigt, ob die Meta-Taste gedrückt war, als das Touch-Ereignis ausgelöst wurde.

TouchEvent.shiftKey Schreibgeschützt

Ein boolescher Wert, der anzeigt, ob die Umschalttaste gedrückt war, als das Touch-Ereignis ausgelöst wurde.

TouchEvent.targetTouches Schreibgeschützt

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

TouchEvent.touches Schreibgeschützt

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

TouchEvent.rotation Nicht standardisiert Schreibgeschützt

Ä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 Schreibgeschützt

Abstand zwischen zwei Digitalen seit Beginn des Ereignisses. Ausgedrückt als Gleitkomma-Vielfaches des Anfangsabstands zwischen den Digits zu Beginn des Ereignisses. Werte unter 1.0 deuten auf ein Einwärts-Ziehen (Herauszoomen) hin. Werte über 1.0 deuten auf ein Auswärts-Ziehen (Hineinzoomen) hin. Anfangswert: 1.0.

Touch-Ereignistypen

Es gibt mehrere Arten von Ereignissen, die ausgelöst werden können, um anzuzeigen, dass berührungsbezogene Änderungen aufgetreten sind. Sie können feststellen, welches dieser Ereignisse aufgetreten ist, indem Sie die TouchEvent.type-Eigenschaft des Ereignisses betrachten.

touchstart

Wird gesendet, wenn der Benutzer einen Berührungspunkt auf der Berührungsoberfläche platziert. Das Ziel des Ereignisses wird das Element sein, in dem die Berührung stattfand.

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 abhebt. Dies wird ebenfalls gesendet, wenn der Berührungspunkt den Rand der Oberfläche verlässt; zum Beispiel, wenn der Finger des Benutzers über den Rand des Bildschirms gleitet.

Das Ziel des Ereignisses ist das gleiche Element, das das touchstart-Ereignis für den Berührungspunkt erhalten hat, selbst wenn der Berührungspunkt sich außerhalb dieses Elements bewegt hat.

Der Berührungspunkt (oder die Berührungspunkte), die von der Oberfläche entfernt wurden, finden Sie 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 das gleiche Element, das das touchstart-Ereignis für den Berührungspunkt erhalten hat, selbst wenn der Berührungspunkt sich außerhalb dieses Elements bewegt hat.

Dieses Ereignis wird ebenfalls gesendet, wenn sich die Werte der Radius-, Drehwinkel- oder Kraftattribute eines Berührungspunkts ändern.

Hinweis: Die Frequenz, mit der touchmove-Ereignisse gesendet werden, ist browser-spezifisch und kann auch von den Fähigkeiten der Hardware des Benutzers abhängen. 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 von Gerät zu Gerät sowie von Browser zu Browser):

  • Ein Ereignis irgendeiner Art trat auf, das die Berührung abbrach; dies könnte passieren, wenn während der Interaktion ein modales Fenster erscheint.
  • Der Berührungspunkt hat das Dokumentenfenster verlassen und sich in den UI-Bereich des Browsers, ein Plug-in oder andere externe Inhalte bewegt.
  • Der Benutzer hat mehr Berührungspunkte auf dem Bildschirm platziert, als unterstützt werden können, in diesem Fall wird der früheste Touch in der TouchList abgebrochen.

Verwendung mit addEventListener() und preventDefault()

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

Die Ausnahme hierfür ist Chrome, beginnend mit Version 56 (Desktop, Chrome für Android und Android Webview), wo der Standardwert für die passive-Option für touchstart und touchmove true ist und Aufrufe von preventDefault() keinen Effekt haben. Um dieses Verhalten zu überschreiben, müssen Sie die passive-Option auf false setzen, wonach Aufrufe von preventDefault() wie angegeben funktionieren. Die Änderung, Listeners standardmäßig als passive zu behandeln, verhindert, dass der Listener das Rendering der Seite blockiert, während ein Benutzer scrollt. Eine Demo finden Sie auf der Seite von Chrome Developer.

Beispiel

Spezifikationen

Specification
Touch Events
# touchevent-interface

Browser-Kompatibilität

Siehe auch