Dieser Artikel beschreibt JavaScript -Ereignisse im Touchscreen. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
1. Berührenereignisse
Ontouchstart
Ontouchmove
Ontouchend
OnTouchCancel unterstützt derzeit diese 4 Touch -Events, einschließlich IE. Da Touchscreens auch Mouseevent unterstützen, muss ihre Bestellung beachtet werden: TouchStart → Mouseover → Mousemove → MouseDown → MouseUp → Click1
Beispiele sind wie folgt:
/*** ontouchEvent*/var div = document.getElementById ("div"); // TouchStart ist ähnlich wie mit MouseDownDiv.ontouchstart = Funktion (e) {// Das Attribut des Touchs-Attributs des Ereignisses ist ein Array, wobei ein Element einen Berührungspunkt darstellt. E. touches [0]; // Erhalten Sie die Koordinaten des aktuellen Touch -Punktes, der äquivalent zu clientx/clientyvar x = touch.clientx; var y = touch.clienty;}; // touchmove ist ähnlich ähnlich wie mit Mousemovediv.ontouchmove = Funktion (e) {// Sie können verhindern, dass Sie die Ereignisse verhindern können, um zu verhindern. Scrolling usw. E.PreventDefault ();}; // Touchend ähnelt mouseUpdiv.ontouchup = Funktion (e) {// nichts zu tun};2. Gestenereignisse Gesten beziehen sich auf die Verwendung von Multitouch, um sich zu drehen, zu dehnen und andere Vorgänge wie das Vergrößern und rotierende Bilder und Webseiten zu rotieren. Ein Gestenereignis wird ausgelöst, wenn zwei oder mehr Finger gleichzeitig berühren müssen. Eine Sache, auf die wir über Skalierung achten müssen, sind die Positionskoordinaten von Elementen: Wir verwenden normalerweise OffsetX, GetboundingClientRect und andere Methoden, um die Positionskoordinaten von Elementen zu erhalten. In mobiler Browsern wird die Seite jedoch häufig während der Verwendung skaliert. So werden die Koordinaten der skalierten Elemente ändern? Die Antwort ist, dass es Unterschiede gibt. Verwenden Sie ein Szenario, um dieses Problem zu veranschaulichen: Nachdem Seite A geladen wurde, erhält JavaScript die Koordinaten des Elements im Dokument als (100.100) und dann vergrößert der Benutzer die Seite. Zu diesem Zeitpunkt gibt JavaScript die Elementkoordinaten erneut und still (100.100) aus, aber der Antwortbereich des Elements auf dem Bildschirm wird gemäß dem Skalierungsverhältnis ausgeglichen. Sie können die Backelspiel-Game-Demo öffnen und dann nach dem vollständigen Laden der Seite zoomen. Zu diesem Zeitpunkt werden Sie feststellen, dass Sie auch dann, wenn Ihr Finger außerhalb des Bereichs "Touch Here" berührt, die Kugelplatte steuern können, da der Bereich versetzt ist. Der Offset wird immer existieren, es sei denn, die Seite wird aktualisiert oder der Zoom wird wiederhergestellt.
/*** ongestureEvent*/var div = document.getElementById ("div"); div.ongesturechange = Funktion (e) {// Skala repräsentiert die Skalierungsskala, die von der Geste erzeugt wird. Weniger als 1 schrumpft und größer als 1 ist die Vergrößerung. Ursprünglich 1VAR -Skala = E.Scale; // Drehung repräsentiert den Winkel der Rotationsgeste, das Wertintervall [0,360], der positive Wert dreht sich im Uhrzeigersinn im Uhrzeigersinn gegen den Uhrzeigersinn var Winkel = E.Rotation;};3. Die Gravity -Erfassungsfindung ist einfacher. Sie müssen dem Körperknoten nur ein OnorientationChange -Ereignis hinzufügen. In diesem Fall wird der Wert, der die aktuelle Telefonrichtung darstellt, aus der Eigenschaft des Fensters erhalten. Die Werteliste von Fenster.orientierung lautet wie folgt:
0: Übereinstimmung mit der Richtung, in der die Seite zum ersten Mal geladen wurde
-90: im Uhrzeigersinn um 90 ° relativ zur ursprünglichen Richtung gedreht
180: 180 ° gedreht
90: 90 ° gegen den Uhrzeigersinn gedreht. Nach meinen Tests unterstützt Android 2.1 noch keine Schwerkraft erfasst. Das obige sind die aktuellen Touchscreen -Ereignisse. Diese Ereignisse wurden nicht in den Standard einbezogen, sondern weit verbreitet. Ich habe Android 2.1, das nicht in anderen Umgebungen getestet wurde.
PS: Hier bieten wir Ihnen ein Online -Tool über JS -Ereignisse, das die häufig verwendeten Ereignisarten und Funktionsfunktionen von JS zusammenfasst:
Eine vollständige Liste von JavaScript -Ereignissen und -Funktionen:
http://tools.vevb.com/table/javascript_event
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.