Heim >Web-Frontend >H5-Tutorial >Detaillierte Einführung in HTML5-Touchscreen-Touch-Ereignisse für Mobiltelefone
Viele neue Ereignisse wurden in HTML5 hinzugefügt, aber da ihre Kompatibilitätsprobleme nicht sehr gut sind und ihre praktische Anwendung nicht sehr stark ist, werden sie hier grundsätzlich weggelassen. Wir teilen nur Ereignisse, die weitgehend mit guten Anwendungen kompatibel sind Wenn sich die Kompatibilitätssituation verbessert, werden in Zukunft weitere Freigaben hinzugefügt.
Bei den heute vorgestellten Ereignissen handelt es sich hauptsächlich um Berührungsereignisse:
Touchstart: Wird ausgelöst, wenn die Berührung beginnt.
Touchmove: Wird ausgelöst, wenn der Finger über den Bildschirm gleitet.
Touchend: Die Berührung endet
wird bei Berührungen ausgelöst: Eine Liste aller Finger, die sich derzeit auf dem Bildschirm befinden.
targetTouches: Eine Liste der Finger, die sich auf dem aktuellen DOM-Element befinden.changedTouches: Eine Liste der am aktuellen Ereignis beteiligten Finger.
Jeder Berührungspunkt enthält die folgenden Berührungsinformationen (häufig verwendet):
Bezeichner: ein numerischer Wert, der den aktuellen Finger in der Berührungssitzung eindeutig identifiziert. Im Allgemeinen eine Seriennummer beginnend bei 0 (android4.1, uc)
target: DOM-Element, das das Ziel der Aktion ist.pageX/pageX/clientX/clientY/screenX/screenY: ein Wert, die Position auf dem Bildschirm, an der die Aktion stattfindet (Seite beinhaltet die Scrolldistanz, Client beinhaltet nicht die Scrolldistanz und Bildschirm basiert auf dem Bildschirm) .
radiusX/radiusY/rotationAngle: Zeichnen Sie eine Ellipse, die ungefähr der Form eines Fingers entspricht, mit den beiden Radien bzw. Drehwinkeln der Ellipse. Der vorläufige Testbrowser unterstützt die Funktion nicht. Feedback ist willkommen.
Der Code lautet wie folgt:
Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in HTML5-Touchscreen-Touch-Ereignisse für Mobiltelefone. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!