So erkennen Sie Fingerwischbewegungen auf einem mobilen Gerät mithilfe von JavaScript

Fingerbewegungen auf iPhone und Android mithilfe von JavaScript erkennen

Die Erkennung von Fingerbewegungen auf Webseiten ist für die Erstellung interaktiver mobiler Erlebnisse von entscheidender Bedeutung. In diesem Artikel wird eine vielseitige JavaScript-Lösung untersucht, die nahtlos sowohl auf iPhone- als auch auf Android-Geräten funktioniert.

So erkennen Sie Fingerbewegungen:

1. Implementieren Sie Ereignis-Listener für Touchstart- und Touchmove-Ereignisse.
2. Verfolgen Sie die anfängliche Berührungsposition in den Variablen xDown und yDown.
3. Verwenden Sie getTouches(), um Berührungsereignisse in verschiedenen Browsern zu normalisieren.
4. Berechnen Sie in der Funktion handleTouchMove die Differenz zwischen der anfänglichen und der aktuellen Berühren Sie Positionen.
5. Überprüfen Sie, ob die horizontale (X-Differenz) oder vertikale (Y-Differenz) Bewegung signifikanter ist.
6. Bestimmen Sie anhand der Differenz die Wischrichtung (links, rechts, oben, oder herunter).

Hier ist ein einfaches JavaScript-Codebeispiel zur Implementierung dieser Lösung:

<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 || evt.originalEvent.touches;
}

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)) {
    if (xDiff > 0) {
      /* right swipe */
    } else {
      /* left swipe */
    }
  } else {
    if (yDiff > 0) {
      /* down swipe */
    } else {
      /* up swipe */
    }
  }

  /* reset values */
  xDown = null;
  yDown = null;
}</code>

Dieser Code wurde erfolgreich auf Android-Geräten getestet. Durch den Einsatz dieser JavaScript-Techniken können Sie Fingerbewegungen leicht erkennen und das Benutzererlebnis Ihrer mobilen Webanwendungen verbessern.

Das obige ist der detaillierte Inhalt vonSo erkennen Sie Fingerwischbewegungen auf einem mobilen Gerät mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!