마우스 이벤트가 발생했을 때 clientX 속성을 사용하면 마우스 포인터의 가로(X) 좌표를 가져올 수 있습니다. 이 좌표는 전체 화면이나 문서가 아닌 현재 브라우저 창(뷰포트)의 왼쪽 상단 모서리를 기준으로 측정된다는 점이 특징입니다.
clientX와 함께 알아두면 좋은 관련 속성
- clientY: 마우스 포인터의 세로(Y) 좌표를 반환하며, 역시 현재 브라우저 창을 기준으로 합니다.
- pageX / pageY: 문서 전체를 기준으로 한 좌표를 반환하므로 스크롤된 거리까지 포함됩니다.
- screenX / screenY: 물리적인 모니터 화면을 기준으로 한 좌표를 반환합니다.
예제
다음 코드를 실행한 후 텍스트 영역을 클릭해 보세요. 클릭하는 순간 마우스 포인터의 X(가로) 좌표와 Y(세로) 좌표가 현재 창을 기준으로 화면에 출력됩니다.
<!DOCTYPE html>
<html>
<body>
<p onclick = "coordsFunc(event)">
클릭하면 마우스 포인터의 X(가로) 및 Y(세로) 좌표를
(현재 창 기준으로) 확인할 수 있습니다.
</p>
<script>
function coordsFunc(event) {
var x_coord = event.clientX;
var y_coord = event.clientY;
var xycoords = "X 좌표= " + x_coord + ", Y 좌표= " + y_coord;
document.write(xycoords);
}
</script>
</body>
</html>
위 예제에서 event.clientX는 클릭 시점의 가로 좌표를, event.clientY는 세로 좌표를 담고 있습니다. 두 값을 조합하면 마우스 포인터의 정확한 위치를 파악할 수 있어 드래그 앤 드롭, 커스텀 툴팁, 캔버스 그리기 등 다양한 인터랙션 기능을 구현할 때 유용하게 활용됩니다.