Как распознавать движения пальцами в JavaScript на iPhone и Android

При разработке веб-приложений, удобных для мобильных устройств, распознавание жестов пользователя, таких как смахивание пальцами имеет решающее значение для создания интуитивно понятных и адаптивных интерфейсов. В этом руководстве представлено комплексное решение, позволяющее обнаруживать движения пальцами на устройствах iPhone и Android с помощью JavaScript.

Для обнаружения движений пальцами мы используем прослушиватели событий касания в JavaScript. Вот пример фрагмента кода, который поможет вам начать:

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

Этот фрагмент кода прослушивает события touchstart и touchmove, фиксируя начальную позицию касания, а также обновленную позицию во время движения. Сравнивая разности x и y, мы можем определить направление смахивания. Будь то смахивание вправо, влево, вверх или вниз, этот код обеспечивает надежное решение для обнаружения смахивания пальца.

Этот подход был протестирован и проверен на эффективную работу на устройствах Android. Включив его в свою кодовую базу JavaScript, вы сможете создавать веб-интерфейсы, ориентированные на мобильные устройства, которые радуют пользователей плавным взаимодействием на основе жестов.