Como detectar movimentos de dedo em JavaScript no iPhone e Android

Ao desenvolver aplicativos da web compatíveis com dispositivos móveis, detectando gestos do usuário, como deslizamentos de dedo é crucial para a criação de interfaces intuitivas e responsivas. Este guia fornece uma solução abrangente que permite detectar toques de dedo em dispositivos iPhone e Android usando JavaScript.

Para detectar toques de dedo, utilizamos ouvintes de eventos de toque em JavaScript. Aqui está um trecho de código de exemplo para você começar:

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

Este trecho de código escuta eventos 'touchstart' e 'touchmove', capturando a posição de toque inicial, bem como a posição atualizada durante o movimento. Ao comparar as diferenças xey, podemos determinar a direção do deslizamento. Seja deslizando para a direita, para a esquerda, para cima ou para baixo, este código fornece uma solução robusta para detectar movimentos de dedo.

Essa abordagem foi testada e verificada para funcionar de maneira eficaz em dispositivos Android. Ao incorporá-lo à sua base de código JavaScript, você pode criar experiências da Web voltadas para dispositivos móveis que encantam os usuários com interações fluidas e orientadas por gestos.