HTML DOM MouseEvent clientX 속성 – 마우스 포인터의 X 좌표 구하기

HTML DOM MouseEvent clientX 속성이란?

HTML DOM의 MouseEvent clientX 속성은 마우스 이벤트가 발생한 순간 마우스 포인터가 위치한 수평(X) 좌표를 픽셀 단위로 반환합니다. 이때 좌표는 브라우저 화면(뷰포트)의 왼쪽 상단 모서리를 원점(0, 0)으로 하여 계산됩니다.

clientY 속성과 함께 사용하면 수직(Y) 좌표도 함께 얻을 수 있으므로, 마우스 포인터의 정확한 위치를 파악하는 데 활용할 수 있습니다.

문법(Syntax)

clientX 값을 반환하는 기본 문법은 다음과 같습니다.

MouseEventObject.clientX

반환값: 마우스 포인터의 X 좌표(숫자).

예제

다음 예제는 clientX와 clientY 속성을 활용해 간단한 미니 게임을 구현한 것입니다. '시작' 버튼을 누른 뒤 초록색 안전 구역 안에서 커서를 목표 지점까지 이동시키면 성공하고, 빨간색 위험 구역에 들어가면 실패하는 방식입니다.

<!DOCTYPE html>
<html>
<head>
<title>MouseEvent clientX</title>
<style>
   * {
      padding: 2px;
      margin: 5px;
   }
   form {
      width: 70%;
      margin: 0 auto;
      text-align: center;
   }
   #outer {
      width: 70%;
      margin: 0 auto;
      padding: 0;
      text-align: center;
      border: 1px solid black;
      height: 105px;
      background-color: #28a745;
   }
   input[type="button"] {
      border-radius: 10px;
   }
   #upper {
      border-bottom: 1px solid black;
      height: 40px;
      margin: 0 0 15px 0;
      background-color: #DC3545;
   }
   #lower {
      border-top: 1px solid black;
      height: 40px;
      margin: 15px 0 0 0;
      background-color: #DC3545;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>MouseEvent-clientX</legend>
         <div id="outer">
            <div id="upper"><h2>위험</h2></div>
            <div id="lower"><h2>위험</h2></div>
         </div>
         <input type="button" id="start" value="시작" onclick="gameStart()">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
   <script>
      var divDisplay = document.getElementById('divDisplay');
      var gameDisplay = document.getElementById('outer');
      function playGame(event) {
         var x = event.clientX;
         var y = event.clientY;
         if(y > 95 && y < 110){
            divDisplay.textContent = '계속 진행하세요!';
            if(x === 439){
               divDisplay.textContent = '축하합니다! 성공했습니다!';
               gameDisplay.removeEventListener('mousemove', playGame);
            }
         } else {
            divDisplay.textContent = '위험 구역으로 이동했습니다. 실패!';
            gameDisplay.removeEventListener('mousemove', playGame);
         }
      }
      function gameStart(){
         gameDisplay.addEventListener('mousemove', playGame);
      }
   </script>
</body>
</html>

실행 결과

'시작' 버튼을 클릭한 후 커서를 초록색(안전) 영역에 두었을 때 −

HTML DOM MouseEvent clientX 속성 – 마우스 포인터의 X 좌표 구하기

'시작' 버튼을 클릭한 후 커서를 초록색(안전) 영역의 끝 지점에 위치했을 때 −

HTML DOM MouseEvent clientX 속성 – 마우스 포인터의 X 좌표 구하기

'시작' 버튼을 클릭한 후 커서를 빨간색(위험) 영역에 두었을 때 −

HTML DOM MouseEvent clientX 속성 – 마우스 포인터의 X 좌표 구하기

참고: 함께 알아두면 좋은 좌표 속성

clientX / clientY : 브라우저 화면(뷰포트) 기준 좌표로, 스크롤 여부와 관계없이 현재 보이는 화면을 기준으로 계산됩니다.
pageX / pageY : 문서 전체 기준 좌표로, 스크롤된 거리까지 포함하여 계산됩니다.
screenX / screenY : 물리적인 모니터 화면 기준 좌표입니다.

clientX 속성은 Chrome, Edge, Firefox, Safari, Opera 등 모든 주요 브라우저에서 지원되므로 호환성 문제 없이 안심하고 사용할 수 있습니다.