Dieser Artikel stellt hauptsächlich die Implementierungsmethode des HTML5-Touch-Ereignisses vor, um einen einfachen Fortschrittsbalken auf dem mobilen Endgerät zu implementieren. Jetzt kann ich ihn mit Ihnen teilen
Vorwort
Viele neue Ereignisse wurden zu HTML hinzugefügt, aber aufgrund von Kompatibilitätsproblemen werden viele Ereignisse nicht häufig verwendet. Als nächstes werde ich einige nützliche Ereignisse vorstellen diejenigen. Mobile Touch-Ereignisse: Touchstart, Touchmove, Touchend.
Einführung
Lassen Sie uns diese Ereignisse kurz vorstellen:
Touchstart: Wird ausgelöst, wenn ein Finger berührt auf dem Bildschirm, auch wenn sich bereits ein Finger auf dem Bildschirm befindet.
touchmove: Wird kontinuierlich ausgelöst, wenn der Finger über den Bildschirm gleitet. Während dieses Ereignisses kann der Aufruf des Ereignisses „preventDefault()“ das Scrollen verhindern.
Touchend: wird ausgelöst, wenn der Finger den Bildschirm verlässt.
Diese Berührungsereignisse haben gemeinsame Dom-Attribute. Darüber hinaus enthalten sie auch drei Attribute zum Verfolgen von Berührungen:
Berührungen: ein Array von Berührungsobjekten, die die aktuell verfolgten Berührungsvorgänge darstellen.
targetTouches: Array von Touch-Objekten, die für Ereignisziele spezifisch sind.
changeTouches: Ein Array von Touch-Objekten, das angibt, was sich seit der letzten Berührung geändert hat.
Jedes Touch-Objekt enthält die folgenden Eigenschaften:
clientX: Die x-Koordinate des Touch-Ziels im Ansichtsfenster.
clientY: Die y-Koordinate des Berührungsziels im Ansichtsfenster.
pageX: Die x-Koordinate des Berührungsziels auf der Seite.
pageY: Die y-Koordinate des Berührungsziels auf der Seite.
screenX: screenX: Die x-Koordinate des Berührungsziels auf dem Bildschirm.
screenY: screenX: Die x-Koordinate des Berührungsziels auf dem Bildschirm.
Kennung: Eine eindeutige ID, die die Berührung identifiziert.
target: screenX: Die x-Koordinate des Berührungsziels auf dem Bildschirm.
Da Sie nun die Eigenschaften von Berührungsereignissen verstanden haben, beginnen wir mit der spannenden praktischen Sitzung
Praktischer Kampf
Lassen Sie uns Touch-Ereignisse verwenden, um einen verschiebbaren Fortschrittsbalken auf der mobilen Seite zu implementieren
Lassen Sie uns zunächst das HTML
1 2 3 4 |
|
CSS entwerfen Ein Teil wird hier weggelassen
Holen Sie sich das Dom-Element und initialisieren Sie den Berührungsstartpunkt und den Abstand der Schaltfläche von der äußersten linken Ecke des Containers
1 2 3 4 5 6 7 |
|
Auf Touchstart-Ereignis achten
1 2 3 4 5 |
|
Auf Touchmove-Ereignis achten
1 2 3 4 5 6 7 8 9 10 11 |
|
Durch Eine Reihe logischer Operationen haben wir grundsätzlich implementiert, aber es wurde ein Problem entdeckt. Wenn die Berührungsposition den Fortschrittsbalken-Container überschreitet, tritt ein Fehler auf.
1 2 3 4 5 |
|
Bisher wurde eine einfache mobile Bildlaufleiste implementiert
Verwandte Empfehlungen:
So verwenden und erstellen Sie HTML5-Videountertitel
Verwendung von Audio- und Video-Tags in HTML5
Das obige ist der detaillierte Inhalt vonImplementierungsmethode des HTML5-Touch-Ereignisses zur Implementierung eines einfachen Fortschrittsbalkens auf einem mobilen Endgerät. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!