[javascript] 터치 이벤트를 사용하여 터치 스와이프 방향을 감지하는 방법은?

12 Dec 2023

javascript

let touchStartX = 0;
let touchEndX = 0;

document.addEventListener('touchstart', function(event) {
    touchStartX = event.touches[0].clientX;
});

document.addEventListener('touchend', function(event) {
    touchEndX = event.changedTouches[0].clientX;
    handleSwipe();
});

function handleSwipe() {
    if (touchEndX < touchStartX) {
        console.log('Left swipe detected');
    } else if (touchEndX > touchStartX) {
        console.log('Right swipe detected');
    }
}

이 코드에서는 터치 시작 지점과 끝 지점을 감지하여 스와이프 방향을 판별합니다. 이 코드를 사용하면 사용자의 터치 동작에 따라 왼쪽으로 스와이프되었는지 오른쪽으로 스와이프되었는지를 감지할 수 있습니다.

이 코드를 기반으로 원하는 기능을 추가하여 터치 이벤트를 활용할 수 있습니다.