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.
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 allenTouch
-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 allenTouch
-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 allenTouch
-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 dastouchstart
-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 daschangedTouches
-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 dastouchstart
-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 derTouchList
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
Sehen Sie sich das Beispiel im Hauptartikel über Touch-Ereignisse an.
Spezifikationen
Specification |
---|
Touch Events # touchevent-interface |