JavaScript를 이용해 좌우 swipe 방향 알아내기

JavaScript를 이용하여 터치기기에서 좌우 swipe 방향을 체크하는 개념적인 방법이다. 기본적인 아이디어 수준의 코드이기 때문에 실제 사용하는 것은 무리가 있을 것이라 생각한다. 사용자가 기기에 터치를 하면 touchstart 이벤트를 이용해 터치가 시작된 좌표를 기록해둔다. 그런 다음 touchend 이벤트를 이용해 터치가 끝났을 때 시작점의 좌표와 종료점의 좌표를 비교해서 swipe 방향을 체크하는 것이다. iOS 기기의 Safari 브라우저에서는 터치가 끝난 후 touchend 이벤트가 만료되지 않아 touches.length == 0 이라는 조건을 추가해서 체크하도록 했다. Android 기기에서는 바로 이벤트가 만료되는 듯 했다. 좌우로 swipe 하면서 완전히 일직선으로 움직이는 것은 불가능하기 때문에 약간의 허용오차를 둬서 오차범위일 때만 alert 함수가 실행된다.

<script>
window.addEventListener('touchstart', function(event) {
    var touch = event.touches[0];
    touchstartX = touch.clientX;
    touchstartY = touch.clientY;
}, false);

window.addEventListener('touchend', function(event) {
    if(event.touches.length == 0) {
        var touch = event.changedTouches[event.changedTouches.length - 1];
        touchendX = touch.clientX;
        touchendY = touch.clientY;

        touchoffsetX = touchendX - touchstartX;
        touchoffsetY = touchendY - touchstartY;

        if(Math.abs(touchoffsetX) >= 80 && Math.abs(touchoffsetY) <= 10) {
            if(touchoffsetX < 0)
                alert("swipe left");
            else
                alert("swipe right");
        }
    }
}, false);
</script>

얼핏보면 괜찮은 방법인 것 같은데 scroll 이벤트가 함께 발생하기 때문에 좌우 swipe 임에도 문서가 오르락내리락 할 수 있다. 이런 경우에도 대비를 해야하겠지만 당장은 방법이 떠오르지 않아 이정도에서 마무리를 한다. 이전에 포스팅했던 jQuery swipe 플러그인을 사용하면 scroll 이벤트까지 제어하면서 swipe 이벤트를 제대로 활용할 수 있다. 플러그인이 있는데 굳이 이런 걸 해본 것은 삽질을 좋아하기 때문이다. ㅋㅋ