최종 수정일 :
(1년 전)
제 블로그에서 드로워를 열거나, 홈 화면 슬라이더를 넘길 때 사용 중인 스와이프 감지 스크립트입니다.
굉장히 단순한 구조지만, 간단한 사용엔 크게 무리가 없습니다.
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 이벤트를 위와 같이 수정하시면 됩니다.
