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.
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 allenTouch
-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 allenTouch
-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 allenTouch
-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 dastouchstart
-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 daschangedTouches
-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 dastouchstart
-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 derTouchList
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