MouseEvent pageX 속성이란?
HTML DOM의 MouseEvent pageX 속성은 마우스 이벤트가 발생했을 때 문서(document)를 기준으로 한 마우스 포인터의 수평(X) 좌표를 픽셀 단위 숫자로 반환합니다. 페이지가 스크롤된 상태에서도 문서 전체를 기준으로 좌표를 계산한다는 점이 특징입니다.
pageY 속성과 함께 사용하면 수직(Y) 좌표까지 함께 구할 수 있어, 마우스 위치 추적, 드래그 앤 드롭, 커스텀 툴팁 배치 등 다양한 인터랙티브 기능을 구현할 때 매우 유용합니다.
문법(Syntax)
pageX 값을 반환하는 기본 문법은 다음과 같습니다.
MouseEventObject.pageX
- 반환값: 문서의 왼쪽 가장자리를 기준으로 한 마우스 포인터의 X 좌표(픽셀 단위 숫자)
예제로 살펴보기
아래 예제는 간단한 미니 게임을 통해 MouseEvent pageX 속성의 동작 방식을 보여줍니다. 초록색(안전) 영역 안에서 마우스를 움직여 목표 X 좌표에 도달하면 성공하고, 빨간색(위험) 영역에 진입하면 실패하는 게임입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent pageX</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-pageX</legend>
<div id="outer">
<div id="upper"><h2>Danger</h2></div>
<div id="lower"><h2>Danger</h2></div>
</div>
<input type="button" id="start" value="Start" 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.pageX;
var y = event.pageY;
if(y > 95 && y < 110){
divDisplay.textContent = 'Keep Going!';
if(x === 439){
divDisplay.textContent = 'Congrats! You Did it!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
else{
divDisplay.textContent = 'You moved to DANGER area. You loose!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
function gameStart(){
gameDisplay.addEventListener('mousemove',playGame);
}
</script>
</body>
</html>실행 결과
1. Start 버튼 클릭 후 커서가 초록색(안전) 영역에 있을 때
마우스가 안전 구간 내에 있으면 "Keep Going!" 메시지가 표시되며 게임이 계속 진행됩니다.
2. Start 버튼 클릭 후 커서가 초록색(안전) 영역 끝에 도달했을 때
X 좌표가 목표 지점(439px)에 도달하면 "Congrats! You Did it!" 메시지가 출력되고, mousemove 이벤트 리스너가 제거되면서 게임이 종료됩니다.
3. Start 버튼 클릭 후 커서가 빨간색(위험) 영역에 있을 때
Y 좌표가 위험 범위에 들어가면 "You moved to DANGER area. You loose!" 메시지가 표시되며 게임이 즉시 종료됩니다.
정리 및 참고 사항
- pageX: 문서(document) 기준 X 좌표 – 스크롤 거리 포함
- clientX: 뷰포트(viewport) 기준 X 좌표 – 스크롤 무시
- screenX: 물리적 모니터 화면 기준 X 좌표
pageX 속성은 Chrome, Firefox, Safari, Edge 등 모든 최신 브라우저에서 폭넓게 지원되므로 호환성 걱정 없이 사용할 수 있습니다. 스크롤 여부와 관계없이 문서 전체 기준의 정확한 마우스 위치가 필요하다면 pageX/pageY 조합이 가장 적합한 선택입니다.