JavaScript로 마우스 커서 좌표 구하는 방법 완벽 가이드

웹 개발을 하다 보면 사용자의 마우스 커서 위치를 알아내야 하는 경우가 자주 있습니다. 예를 들어 드래그 앤 드롭 기능, 커스텀 툴팁, 캔버스 그리기 등을 구현할 때 커서의 정확한 좌표가 필요하죠.

clientX와 clientY 속성

JavaScript에서 마우스 커서의 좌표를 찾으려면 이벤트 객체가 제공하는 event.clientX와 event.clientY 속성을 사용하면 됩니다.

clientX: 뷰포트(브라우저 화면) 왼쪽 가장자리를 기준으로 한 커서의 X축 좌표
clientY: 뷰포트 위쪽 가장자리를 기준으로 한 커서의 Y축 좌표

이 값들은 픽셀 단위로 반환되며, 페이지 스크롤과는 무관하게 현재 보이는 화면 영역을 기준으로 계산됩니다.

예제 코드

아래 코드는 요소를 클릭했을 때 커서의 좌표를 화면에 출력하는 간단한 예제입니다.

<!DOCTYPE html>
<html>
  <head>
    <script>
      function coordinatesFunc(event) {
        document.write("Coordinate(X) = " + event.clientX +
          "<br>Coordinate(Y) = " + event.clientY);
      }
    </script>
  </head>

  <body>
    <div onmousedown="coordinatesFunc(event)">
      클릭하면 커서 좌표를 확인할 수 있습니다
    </div>
  </body>
</html>

코드 설명

onmousedown 이벤트 핸들러가 div 요소에 등록되어 있어, 사용자가 해당 영역을 마우스로 누르면 coordinatesFunc 함수가 호출됩니다.
함수는 발생한 이벤트 객체를 매개변수 event로 받습니다.
event.clientX와 event.clientY 값을 읽어 화면에 출력합니다.

참고: 다른 좌표 관련 속성들

상황에 따라 아래 속성들이 더 유용할 수 있습니다.

pageX / pageY: 문서 전체(스크롤 포함)를 기준으로 한 좌표
screenX / screenY: 모니터 화면 전체를 기준으로 한 좌표

또한 실무에서는 document.write() 대신 textContent나 innerHTML을 활용해 특정 요소에 결과를 표시하는 것이 권장됩니다. document.write()는 페이지 로딩이 끝난 후 호출되면 문서 전체를 덮어쓰기 때문입니다.