자바스크립트 "모바일 스와이프" 기능 코드

let swipeWidth = 75;  //스와이프 간격 설정
let touchstartX = 0;
let touchDeltaX = 0;

document.addEventListener('touchstart', function(e){
    touchstartX = e.targetTouches[0].pageX;
    document.addEventListener('touchmove', function(e){ 
        touchDeltaX = e.targetTouches[0].pageX - touchstartX; 
    });
})
document.addEventListener('touchend', function(){
    if(Math.abs(touchDeltaX)>=swipeWidth){
        if(touchDeltaX>0){ 
            // 오른쪽 방향, 실행 코드 작성
        }else{ 
            // 왼쪽 방향, 실행 코드 작성
        }
        touchDeltaX = 0;
    }
});

 

[jQuery 코드]

let swipeWidth = 75;  //스와이프 간격 설정
let touchstartX = 0;
let touchDeltaX = 0;

$(document).bind('touchstart', function(e){
    touchstartX = e.targetTouches[0].pageX;
    $(this).bind('touchmove', function(e){ 
        touchDeltaX = e.targetTouches[0].pageX - touchstartX; 
    });
}).bind('touchend',function(){
    if(Math.abs(touchDeltaX)>=swipeWidth){
         if(touchDeltaX>0){ 
             // 오른쪽 방향, 실행 코드 작성
         }else{ 
             // 왼쪽 방향, 실행 코드 작성
         }
        touchDeltaX = 0;
    }
});