FrontEnd
Javascript
Diary
ML
CS
Django
Algorithm
AWS
Co-Work
HTML
CSS
Python
React
ReactNative

Vanilla-JS-Swipe

모바일에서 swipe를 구현하기 위해 Stackoverflow를 찾아보니

Detect a finger swipe through JavaScript on the iPhone and Android

이렇게 touchstart, touchmove를 통해 구현했다.

그런데 이렇게 구현을 하고보니 문제가 있었는데 touchmove를 사용하다보니 moveevent가 발생할때마다 function이 여러번 실행되는 상황이 발생했다.

물론 조건문을 만들어서 제어해줄 수도 있겠지만 조금 더 근-본적으로 해결하고 싶어 JS event를 찾아서직접 작성해보았다.

    target.addEventListener("touchstart", touch_start);
    target.addEventListener("touchend", touch_end);

    let change_x_axis = null;
    
    function touch_go(e){
        change_x_axis = e["touches"][0]["screenX"]
    }
    
    function touch_end(e){
    
        if (change_x_axis - e["changedTouches"][0]["screenX"] > 0){
            // console.log("left swipe")
        }else{
            // console.log("right swipe")
        }
    }

이렇게 touchstarttouchend를 이용해서 Eventlistner를 작성해주면 터치가 시작될때, 터치가 종료될때의 x좌표를 비교하여 swipe의 방향을 인식할수 있다.

단점이라면 조금 민감한 정도…?