So verwenden Sie natives JS zum Implementieren von Touch-Sliding-Überwachungsereignissen

Vorwort

Ich habe heute eine kleine Demo geschrieben. Ein Teil davon beinhaltet die Logik des Wischens nach links und rechts. Ursprünglich wollte ich ein Plug-In verwenden, aber mir fiel ein, dass ich schon lange kein natives JS mehr zum Schreiben von Gleitüberwachungen verwendet hatte, also versuchte ich, es mit nativem JS zu implementieren. Schließlich kann das Überprüfen des Alten Ihnen helfen, das Neue zu lernen und gleichzeitig eine Aufzeichnung zu erstellen. Poste zunächst den erzielten Effekt:

Konzeption

Um einen Smooth Touch Sliding Event Listener zu schreiben, müssen Sie die folgenden drei Aspekte der Logik berücksichtigen:

• Distanz: Die Gleitdistanz sollte größer als 40 sein
• Zeit: Die Gleitzeit beträgt weniger als 0,5 Sekunden, d. h. der Finger wird innerhalb von 500 Millisekunden gedrückt, gezogen und losgelassen (Auslösen durch bloßes Berühren des Bildschirms vermeiden)
• Gleitrichtung:
  • Die Bedingung für das Gleiten nach links und rechts lautet: Die auf der X-Achse zurückgelegte Strecke ist größer als die auf der Y-Achse zurückgelegte Strecke. Ist sie positiv, erfolgt eine Verschiebung nach links, ist sie negativ, erfolgt eine Verschiebung nach rechts.
  • Voraussetzung für das Auf- und Abgleiten ist, dass die auf der Y-Achse zurückgelegte Strecke größer ist als die auf der X-Achse zurückgelegte Strecke. Ist sie positiv, erfolgt eine Aufwärtsbewegung, ist sie negativ, erfolgt eine Abwärtsbewegung.

Mit der Grundidee können wir den Code gemäß dieser Idee vervollständigen ~

Hörereignisse

Bei der Überwachung von Touch-Sliding werden natürlich die folgenden drei Touch-Ereignisse verwendet:

1. touchstart Touch-Start, ausgelöst, wenn mit dem Finger auf den Bildschirm geklickt wird (Multi-Touch kann überwacht werden, und nachfolgende Finger werden ebenfalls ausgelöst)

2. touchmove Der Kontaktpunkt ändert sich und wird beim Gleiten kontinuierlich ausgelöst

3. touchend Touch endet, ausgelöst, wenn der Finger den Bildschirm verlässt

Jedes dieser drei Touch-Ereignisse umfasst drei Touch-Objektlisten (Multi-Touch kann basierend auf den Touch-Punkten implementiert werden):

1. Berührungen: eine Liste aller Fingerberührungspunkte auf dem aktuellen Bildschirm

2. targetTouches: Liste der Finger auf dem aktuellen DOM-Element

3. changedTouches: Liste der aktuellen Ereignisfinger

Gleichzeitig besitzt jedes Touch-Objekt Touch folgende Eigenschaften:

- Kennung: eindeutige ID, die die Berührung identifiziert

- pageX: die x-Koordinate des Berührungspunkts auf der Seite

- pageY: die Y-Koordinate des Berührungspunkts auf der Seite

- screenX: die x-Koordinate des Berührungspunkts auf dem Bildschirm

- screenY: die Y-Koordinate des Berührungspunkts auf dem Bildschirm

- clientX: die x-Koordinate des Berührungspunkts im Ansichtsfenster

- clientY: die Y-Koordinate des Berührungspunkts im Ansichtsfenster

- Ziel: der DOM-Knoten, der berührt wurde

Code-Implementierung

Mit den oben genannten Ideen und der Grundlage von Touch-Ereignissen können wir den Code ganz einfach schreiben ~

let box = document.querySelector('body') // Listener-Objekt let startTime = '' // Startzeit für Touch let startDistanceX = '' // Startposition für Touch auf der X-Achse let startDistanceY = '' // Startposition für Touch auf der Y-Achse let endTime = '' // Endzeit für Touch let endDistanceX = '' // Endposition für Touch auf der X-Achse let endDistanceY = '' // Endposition für Touch auf der Y-Achse let moveTime = '' // Touch-Zeit let moveDistanceX = '' // Touch-Bewegungsdistanz auf der X-Achse let moveDistanceY = '' // Touch-Bewegungsdistanz auf der Y-Achse box.addEventListener("touchstart", (e) => {
    startTime = neues Date().getTime()
    startDistanceX = e.touches[0].screenX
    startDistanceY = e.touches[0].screenY
})
box.addEventListener("touchend", (e) => {
    endTime = neues Date().getTime()
    endDistanceX = e.changedTouches[0].screenX
    endDistanceY = e.changedTouches[0].screenY
    Bewegungszeit = Endzeit - Startzeit
    bewegeDistanzX = startDistanzX - endDistanzX
    moveDistanceY = startDistanceY - endDistanceY
    console.log(VerschiebedistanzX, VerschiebedistanzY)
    // Bestimmen Sie, ob die Gleitdistanz 40 überschreitet und die Zeit weniger als 500 Millisekunden beträgt, wenn ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {
        // Bestimmen Sie, ob die auf der X-Achse zurückgelegte Distanz größer ist als die auf der Y-Achse zurückgelegte Distanz, wenn (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
        // Links und rechts console.log(moveDistanceX > 0 ? 'left' : 'right')
        } anders {
        // Rauf und runter console.log(moveDistanceY > 0 ? 'up' : 'down')
        }
    }
})

Lassen Sie es uns ausführen und sehen:

Es ist ersichtlich, dass die Berührungszeit nicht ausgelöst wird, wenn sie größer als 500 ms ist, und die Gleitdistanz nicht ausgelöst wird, wenn sie kleiner als 40 ist. Bei einem abgewinkelten Gleiten ist die längste Bewegungsdistanz auf der XY-Achse maßgebend. Perfekt gelungen!

Nachtrag

Das Front-End-Framework entwickelt sich rasant und viele Leute verspüren keinen Druck, das Framework direkt zu erlernen, sodass sie dem Erlernen von nativem JS nicht viel Aufmerksamkeit schenken. Aber egal, wie sich die Dinge ändern, das Wesentliche bleibt dasselbe. Der Vorteil des Frameworks liegt in seinen Designideen und -mustern. Wenn Sie ein tiefes Verständnis haben möchten, benötigen Sie immer noch natives JS als Grundlage. Wenn Sie weit kommen möchten, müssen Sie immer noch ein solides Fundament legen. Schließlich beginnt ein hohes Gebäude am Boden, oder?

Damit ist dieser Artikel über die Verwendung von nativem JS zur Implementierung von Touch-Sliding-Überwachungsereignissen abgeschlossen. Weitere relevante Inhalte zu JS-Touch-Sliding-Überwachungsereignissen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!