Implementierungsmethode des HTML5-Touch-Ereignisses zur Implementierung eines einfachen Fortschrittsbalkens auf einem mobilen Endgerät

Viele neue Ereignisse wurden zu HTML hinzugefügt, aber aufgrund von Kompatibilitätsproblemen werden viele Ereignisse nicht häufig verwendet. Als Nächstes stellen wir einige nützliche mobile Touch-Ereignisse vor: touchstart, touchmove, touchend.

Lassen Sie uns diese Ereignisse kurz vorstellen:

1. touchstart: Wird ausgelöst, wenn ein Finger den Bildschirm berührt, auch wenn sich bereits ein Finger auf dem Bildschirm befindet.
2. 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.
3. touchend: Wird ausgelöst, wenn der Finger den Bildschirm verlässt.

Diese Berührungsereignisse haben gemeinsame Dom-Eigenschaften. Darüber hinaus enthalten sie drei Eigenschaften zum Verfolgen von Berührungen:

1. Berührungen: Ein Array von Berührungsobjekten, die die aktuell verfolgten Berührungsvorgänge darstellen.
2. targetTouches: Array von Touch-Objekten, die für Ereignisziele spezifisch sind.
3. changeTouches: Ein Array von Touch-Objekten, das darstellt, was sich seit der letzten Berührung geändert hat.

Jedes Touch-Objekt enthält die folgenden Eigenschaften:

1. clientX: Die x-Koordinate des Touch-Ziels im Ansichtsfenster.
2. clientY: Die Y-Koordinate des Berührungsziels im Ansichtsfenster.
3. pageX: Die x-Koordinate des Berührungsziels auf der Seite.
4. pageY: Die Y-Koordinate des Berührungsziels auf der Seite.
5. screenX: screenX: Die x-Koordinate des Berührungsziels auf dem Bildschirm.
6. screenY: screenX: Die x-Koordinate des Berührungsziels auf dem Bildschirm.
7. Bezeichner: Eine eindeutige ID, die die Berührung identifiziert.
8. target: screenX: Die x-Koordinate des Berührungsziels auf dem Bildschirm.

Nachdem Sie nun die Eigenschaften von Berührungsereignissen verstanden haben, beginnen wir mit der spannenden praktischen Sitzung.

Lassen Sie uns Touch-Ereignisse verwenden, um einen verschiebbaren Fortschrittsbalken auf der mobilen Seite zu implementieren.

Lassen Sie uns zunächst das HTML-Layout erstellen

 <div class=progress-wrapper> <div class=progress></div> <div class=progress-btn></div></div>

Der CSS-Teil wurde hier weggelassen

Holen Sie sich das dom-Element und initialisieren Sie den Berührungsstartpunkt und den Abstand zwischen der Schaltfläche und dem ganz linken Teil des Containers

 const progressWrapper = document.querySelector('.progress-wrapper')const progress = document.querySelector('.progress')const progressBtn = document.querySelector('.progress-btn')const progressWrapperWidth = progressWrapper.offsetWidthlet touchPoint = 0let btnLeft = 0

Achten Sie auf das Touchstart-Ereignis

 progressBtn.addEventListener('touchstart', e => { let touch = e.touches[0] touchPoint = touch.clientX // Anfangsposition der Berührung abrufen btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'] , 10 ) // IE-Browserkompatibilität hier ignorieren})

Achten Sie auf Touchmove-Ereignisse

 progressBtn.addEventListener('touchmove', e => {e.preventDefault() let touch = e.touches[0] let diffX = touch.clientX - touchPoint // Berechnen Sie den geänderten Abstand anhand der Differenz zwischen der aktuellen Position und der Anfangsposition position let btnLeftStyle = btnLeft + diffX // Definiere einen neuen linken Wert für die Schaltfläche touch.target.style.left = btnLeftStyle + 'px' progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + '%' // Berechnen Sie den Längenprozentsatz des Fortschrittsbalkens durch das Verhältnis des linken Werts der Schaltfläche zur Länge des Fortschrittsbalkencontainers})

Durch eine Reihe logischer Operationen wurde unser Fortschrittsbalken grundsätzlich implementiert, es wurde jedoch ein Problem entdeckt. Wenn die Berührungsposition den Fortschrittsbalken-Container überschreitet, treten einige Einschränkungen auf.

 if (btnLeftStyle > progressWrapperWidth) { btnLeftStyle = progressWrapperWidth } else if (btnLeftStyle < 0) { btnLeftStyle = 0}

Zu diesem Zeitpunkt wurde eine einfache mobile Bildlaufleiste implementiert

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.