Wie erkennt und bestimmt man die Wischrichtung des Fingers in JavaScript auf iPhone und Android?

Erkennen von Fingerbewegungen in JavaScript auf iPhone und Android

In der heutigen, auf Mobilgeräte ausgerichteten Welt ist es wichtig, nahtlose Benutzererlebnisse auf einer Vielzahl von Geräten zu bieten. Ein Aspekt, der wesentlich zur Benutzerfreundlichkeit beiträgt, ist die Fähigkeit, Fingerwischbewegungen in Webanwendungen zu erkennen. In diesem Artikel wird eine Vanilla-JS-Lösung vorgestellt, die diese Herausforderung sowohl auf iPhone- als auch auf Android-Plattformen angeht.

Benutzerwischbewegungen identifizieren

Um Fingerwischbewegungen in JavaScript zu erkennen, verwenden wir Ereignis-Listener für „Touchstart“. und „Touchmove“. Diese Listener verfolgen den ersten Berührungspunkt (xDown, yDown) und überwachen dann nachfolgende Berührungsbewegungen.

Bestimmen der Wischrichtung

Der Schlüssel zur Identifizierung der Wischrichtung liegt in der Berechnung der Differenz zwischen Berührungspunkten während des „touchmove“-Ereignis. Indem wir diesen Unterschied sowohl auf der x- als auch auf der y-Achse vergleichen, können wir die bedeutendste Bewegung ermitteln:

• Wenn der Unterschied auf der x-Achse größer ist als der auf der y-Achse: Es ist eine horizontale Wischbewegung aufgetreten .
• Ansonsten hat ein vertikaler Wisch stattgefunden.

Basierend auf diesen Berechnungen können wir die Wischbewegungen kategorisieren als:

• Horizontal Wischbewegungen: Nach links oder rechts
• Vertikale Wischbewegungen: Nach oben oder unten

Beispielcode

Der folgende Codeausschnitt bietet eine einfache dennoch effektive Implementierung der Wischerkennung:

<code class="js">document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function getTouches(evt) {
  return evt.touches ||             // browser API
         evt.originalEvent.touches; // jQuery
}

function handleTouchStart(evt) {
    const firstTouch = getTouches(evt)[0];
    xDown = firstTouch.clientX;
    yDown = firstTouch.clientY;
};

function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.touches[0].clientX;
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {
            /* right swipe */
        } else {
            /* left swipe */
        }
    } else {
        if ( yDiff > 0 ) {
            /* down swipe */
        } else {
            /* up swipe */
        }
    }
    /* reset values */
    xDown = null;
    yDown = null;
};</code>

Dieses Codebeispiel wurde erfolgreich auf Android-Geräten getestet.

Browserkompatibilität

Die bereitgestellte Lösung ist mit den folgenden Browsern kompatibel auf iPhone und Android:

• Safari
• Chrome
• Firefox

Fazit

Diese JavaScript-Lösung ermöglicht Sie können Fingerbewegungen auf iPhone- und Android-Geräten effizient erkennen. Es bietet eine solide Grundlage für die Erstellung intuitiverer und benutzerfreundlicherer Webanwendungen, die natürlich auf Berührungsgesten reagieren.

Das obige ist der detaillierte Inhalt vonWie erkennt und bestimmt man die Wischrichtung des Fingers in JavaScript auf iPhone und Android?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!