Comment détecter les glissements de doigt en JavaScript sur iPhone et Android

Lors du développement d'applications Web adaptées aux mobiles, détection des gestes des utilisateurs tels que les glissements de doigt est crucial pour créer des interfaces intuitives et réactives. Ce guide fournit une solution complète qui vous permet de détecter les mouvements du doigt sur les appareils iPhone et Android à l'aide de JavaScript.

Pour détecter les mouvements du doigt, nous exploitons les écouteurs d'événements tactiles en JavaScript. Voici un exemple d'extrait de code pour vous aider à démarrer :

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)) { /*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;
}

Cet extrait de code écoute les événements « touchstart » et « touchmove », capturant la position tactile initiale ainsi que la position mise à jour pendant le mouvement. En comparant les différences x et y, nous pouvons déterminer la direction du balayage. Qu'il s'agisse d'un balayage vers la droite, la gauche, le haut ou le bas, ce code fournit une solution robuste pour détecter les balayages du doigt.

Cette approche a été testée et vérifiée pour fonctionner efficacement sur les appareils Android. En l'intégrant à votre base de code JavaScript, vous pouvez créer des expériences Web axées sur les mobiles qui ravissent les utilisateurs avec des interactions fluides et pilotées par les gestes.