iPhone 및 Android의 JavaScript에서 손가락 스와이프를 감지하는 방법

모바일 친화적인 웹 애플리케이션을 개발할 때 손가락 스와이프와 같은 사용자 제스처를 감지합니다. 직관적이고 반응이 빠른 인터페이스를 만드는 데 중요합니다. 이 가이드는 JavaScript를 사용하여 iPhone 및 Android 장치 모두에서 손가락 스와이프를 감지할 수 있는 포괄적인 솔루션을 제공합니다.

손가락 스와이프를 감지하기 위해 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 코드베이스에 통합하면 유연하고 제스처 중심의 상호 작용으로 사용자를 만족시키는 모바일 우선 웹 경험을 만들 수 있습니다.