[JS] 마우스 이동 방향 판단하기

 

마우스 이동방향을 감지하는 가장 쉬운 방법은 이전에 위치했던 마우스 좌표값과 현재 마우스 좌표 값의 대소를 비교하는 것입니다.

 

코드

 

코드 풀이

// 이벤트 생성
window.addEventListener("mousemove", getMouseDirection);

마우스의 이동을 감지하는 대표적인 이벤트로는 mousemove가 존재합니다. addEventListener 함수를 이용해서 마우스 이벤트를 생성해줍니다.

 

let prevX = 0, prevY = 0; // 이전에 있던 좌표 

function getMouseDirection(event) {
  const xDir = prevX <= e.pageX ? "right" : "left";
  const yDir = prevY <= e.pageY ? "down" : "up";
  
  prevX = e.pageX;
  prevY = e.pageY;
  
  console.log(xDir + "-" + yDir);
}

마우스 좌표값의 대소를 비교하기 위해서는 현재 좌표 이전에 위치해 있었던 좌표 값을 저장하고 현재 값과 비교해줘야합니다. 저장된 값과 현재의 마우스 좌표 값을 비교하여 방향을 판단해줍니다.

 

• 현재 값이 이전 값보다 작으면, 왼쪽 또는 위쪽으로 이동했다고 볼 수 있습니다.
• 반대로 값이 크다면, 오른쪽 또는 아래쪽으로 이동했다고 볼 수 있습니다.