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

12 Dec 2023

javascript

가장 간단한 방법 중 하나는 JavaScript의 이벤트 리스너를 사용하는 것입니다.

let touchStartX = 0;
let touchEndX = 0;

document.addEventListener('touchstart', function(event) {
    touchStartX = event.changedTouches[0].screenX;
}, false);

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

function handleSwipe() {
    if (touchEndX < touchStartX) {
        // 왼쪽 스와이프 감지
    } else if (touchEndX > touchStartX) {
        // 오른쪽 스와이프 감지
    }
}

이 코드는 터치 시작 지점과 끝 지점의 X 좌표를 비교하여 스와이프 동작을 감지합니다.

더 복잡한 스와이프 감지를 위해서는 각종 JavaScript 라이브러리나 프레임워크를 활용할 수도 있습니다. 예를 들어, Hammer.js나 React 등의 라이브러리를 사용하여 더 풍부한 터치 제스처를 다룰 수 있습니다.

더 자세한 정보와 다양한 예제는 관련 문서나 라이브러리의 공식 웹사이트를 참고하시기 바랍니다.