touchstart , touchmove , touchend 터치이벤트

1.방법

https://kkh0977.tistory.com/885

66. (javascript/자바스크립트) 터치 이벤트 등록 및 좌표 확인 실시 - touchstart , touchmove , touchend

	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log("");


    		// [터치 등록 이벤트 호출]
    		main();
    	};
    	



    	/* [터치 이벤트 등록 및 터치 상황 확인 함수] */
    	function main(){    		
    		console.log("");
    		console.log("[main] : [start]");    		
    		console.log("");


    		// [특정 객체 터치 이벤트 등록 실시]
    		var id = "one_container";
    		document.getElementById(id).addEventListener("touchstart", handleStart, false);
    		document.getElementById(id).addEventListener("touchmove", handleMove, false);
    		document.getElementById(id).addEventListener("touchend", handleEnd, false);
			

    		// [모바일 : 터치 시작 내부 함수 - (주의) 클릭 이벤트와 겹칠 수 있음]
    		function handleStart(evt) {
    			console.log("");
    			console.log("[main] : [handleStart] : [start]");


    			// body 스크롤 막음 [바디영역에서 스크롤있으면 터치 이벤트 안먹힙니다]
    			BodyScrollDisAble();


    			// 터치한 div id 값 확인 
    			var startId = evt.targetTouches[0].target.id;
    			console.log("[main] : [handleStart] : [ID] : " + startId);    			


    			// 좌표값 확인
    			//var startX = $(this).scrollLeft(); //jquery 방식
    			//var startY = $(this).scrollTop(); //jquery 방식
    			var startX = evt.changedTouches[0].clientX;
    			var startY = evt.changedTouches[0].clientY;
    			console.log("[main] : [handleStart] : [X] : " + startX);
    			console.log("[main] : [handleStart] : [Y] : " + startY);
    			console.log("");
    		};


    		// [모바일 : 터치 이동 내부 함수]
    		function handleMove(evt) {
    			console.log("");		
    			console.log("[main] : [handleMove] : [start]");


    			// body 스크롤 막음 [바디영역에서 스크롤있으면 터치 이벤트 안먹힙니다]
    			BodyScrollDisAble();


    			// 터치한 div id 값 확인 	
    			var moveId = evt.targetTouches[0].target.id;
    			console.log("[main] : [handleMove] : [ID] : " + moveId);


    			// 좌표값 확인
    			// var moveX = $(this).scrollLeft(); //jquery 방식
    			// var moveY = $(this).scrollTop(); //jquery 방식
    			var moveX = evt.changedTouches[0].clientX;
    			var moveY = evt.changedTouches[0].clientY;
    			console.log("[main] : [handleMove] : [X] : " + moveX);
    			console.log("[main] : [handleMove] : [Y] : " + moveY);
    			console.log("");
    		};


    		// [모바일 : 터치 종료 내부 함수] 
    		function handleEnd(evt) {
    			console.log("");
    			console.log("[main] : [handleEnd] : [start]");


    			// 바디 스크롤 허용 
    			BodyScrollAble();


    			// 좌표값 확인 
    			var endX = evt.changedTouches[0].clientX;
    			var endY = evt.changedTouches[0].clientY;
    			console.log("[main] : [handleEnd] : [X] : " + endX);
    			console.log("[main] : [handleEnd] : [Y] : " + endY);
    			console.log("");
    		};

    	};




    	/* [body 영역 스크롤 관리 부분] */
    	function BodyScrollDisAble(){
    		document.body.style.overflow = "hidden"; //스크롤 막음
    	};		
    	function BodyScrollAble(){
    		document.body.style.overflow = "auto"; //스크롤 허용
    	};
    	
    </script>

 

2.방법

 

[자바스크립트] 스와이프 방향 알아내기

let initialX = null,
  initialY = null;

function initTouch(e) {
  initialX = `${e.touches ? e.touches[0].clientX : e.clientX}`;
  initialY = `${e.touches ? e.touches[0].clientY : e.clientY}`;
};

function swipeDirection(e) {
  if (initialX !== null && initialY !== null) {
    const currentX = `${e.touches ? e.touches[0].clientX : e.clientX}`,
      currentY = `${e.touches ? e.touches[0].clientY : e.clientY}`;

    let diffX = initialX - currentX,
      diffY = initialY - currentY;

    Math.abs(diffX) > Math.abs(diffY)
    ? (
      0 < diffX
      ? console.log("to left")
      : console.log("to right")
    )
    : (
      0 < diffY
      ? console.log("to top")
      : console.log("to bottom")
    )

    initialX = null;
    initialY = null;
  }
}

window.addEventListener("touchstart", initTouch);
window.addEventListener("touchmove", swipeDirection);
window.addEventListener("mousedown", (e) => {
  initTouch(e),
  window.addEventListener("mousemove", swipeDirection)
});
window.addEventListener("mouseup", () => {
  window.removeEventListener("mousemove", swipeDirection);
});

처음 마우스를 클릭하거나 디스플레이를 터치하면 해당 좌표를 가져오고, 마우스나 손가락을 움직이면 그 움직인 좌표와 첫 좌표의 차이를 비교해서 스와이프 방향을 구합니다.

window.addEventListener("mousedown", (e) => {
  0 === e.button && (
    initTouch(e),
    window.addEventListener("mousemove", swipeDirection)
  )
});

마우스 좌클릭 시에만 이벤트가 작동하게 하시고 싶으시면 mousedown 이벤트를 위와 같이 수정하시면 됩니다.