Comment détecter les glissements de doigt sur un appareil mobile à l'aide de JavaScript

Détecter un glissement du doigt sur iPhone et Android à l'aide de JavaScript

La détection des glissements du doigt sur les pages Web est cruciale pour créer des expériences mobiles interactives. Cet article explore une solution JavaScript polyvalente qui fonctionne de manière transparente sur les appareils iPhone et Android.

Pour détecter les glissements de doigt :

1. Implémentez des écouteurs d'événements pour les événements touchstart et touchmove.
2. Suivez la position tactile initiale dans les variables xDown et yDown.
3. Utilisez getTouches() pour normaliser les événements tactiles sur différents navigateurs.
4. Dans la fonction handleTouchMove, calculez la différence entre la position initiale et actuelle. positions tactiles.
5. Vérifiez si le mouvement horizontal (différence X) ou vertical (différence Y) est plus significatif.
6. En fonction de la différence, déterminez la direction du balayage (gauche, droite, haut, ou vers le bas).

Voici un exemple de code JavaScript simple pour implémenter cette solution :

<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>

Ce code a été testé avec succès sur les appareils Android. En utilisant ces techniques JavaScript, vous pouvez facilement détecter les mouvements du doigt et améliorer l'expérience utilisateur de vos applications Web mobiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!