JavaScript에서 마우스 커서의 화면(screen) 기준 좌표를 구하려면 이벤트 객체가 제공하는 event.screenX와 event.screenY 속성을 사용하면 됩니다.
이 두 속성은 각각 커서 위치의 X좌표와 Y좌표를 모니터 화면의 왼쪽 상단(0, 0)을 기준으로 픽셀 단위로 반환합니다.
예제
아래 코드를 실행한 후 화면에 표시된 영역을 클릭하면, 화면을 기준으로 한 커서의 좌표를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script>
function coordinatesFunc(event) {
document.write("Coordinate(X) = " + event.screenX + "<br>Coordinate(Y) = " + event.screenY);
}
</script>
</head>
<body>
<div onmousedown = "coordinatesFunc(event)">클릭하면 화면을 기준으로 한 커서의 좌표를 표시합니다.</div>
</body>
</html>참고: 유사한 좌표 속성 비교
마우스 이벤트에는 좌표와 관련된 속성이 여러 가지 있으며, 기준점이 서로 다르므로 용도에 맞게 선택해야 합니다.
- screenX / screenY — 모니터 화면 전체를 기준으로 한 좌표
- clientX / clientY — 브라우저 뷰포트(현재 보이는 화면 영역)를 기준으로 한 좌표
- pageX / pageY — 스크롤을 포함한 문서 전체를 기준으로 한 좌표
따라서 화면 전체 기준의 절대 좌표가 필요하다면 screenX, screenY를 사용하고, 브라우저 창 내부 기준의 좌표가 필요하다면 clientX, clientY를 사용하는 것이 좋습니다.