MouseEvent offsetX 속성이란?
HTML DOM의 MouseEvent offsetX 속성은 마우스 이벤트가 발생했을 때, 이벤트가 발생한 대상(target) 요소를 기준으로 마우스 포인터의 수평(X) 좌표를 반환합니다. 여기에 offsetY 속성을 함께 사용하면 수직(Y) 좌표까지 손쉽게 구할 수 있어, 요소 내부에서의 정확한 마우스 위치 추적이 가능합니다.
예를 들어 게임 화면에서 특정 영역 통과 여부를 판정하거나, 드래그 앤 드롭 기능을 구현할 때 offsetX·offsetY 조합이 매우 유용하게 활용됩니다.
기본 구문
offsetX 값을 반환하는 기본 문법은 다음과 같습니다.
MouseEventObject.offsetX
반환값은 픽셀(px) 단위의 숫자이며, 대상 요소의 안쪽 테두리(inner border edge)를 기준으로 계산됩니다.
실습 예제: 미니 게임으로 배우는 offsetX
아래 예제는 초록색 '안전 구역'과 빨간색 '위험 구역'으로 나뉜 화면에서 마우스를 움직여 골인 지점에 도달하는 간단한 게임입니다. mousemove 이벤트와 offsetX·offsetY 값을 활용해 성공과 실패를 판정합니다.
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent offsetX</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-offsetX</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.offsetX;
var y = event.offsetY;
if(y > 45 && y < 60){
divDisplay.textContent = 'Keep Going!';
if(x === 272){
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>코드 핵심 로직
- gameStart(): 'Start' 버튼 클릭 시 outer 영역에 mousemove 이벤트 리스너를 등록합니다.
- playGame(event): 마우스가 움직일 때마다 offsetX와 offsetY 값을 읽어 현재 위치를 판단합니다.
- Y 좌표가 45~60 사이(중앙 통로)라면 "Keep Going!" 메시지를 표시하고, X 좌표가 정확히 272에 도달하면 성공 처리 후 이벤트 리스너를 제거합니다.
- 그 외 영역(빨간색 위험 구역)에 진입하면 실패 메시지를 출력하고 게임을 종료합니다.
실행 결과
'Start' 버튼을 클릭한 뒤 커서가 초록색(안전) 영역 안에 있을 때의 화면입니다.
'Start' 버튼을 클릭한 뒤 커서가 초록색(안전) 영역의 끝 지점, 즉 골인 지점에 도달했을 때의 화면입니다.
'Start' 버튼을 클릭한 뒤 커서가 빨간색(위험) 영역으로 이동했을 때의 화면입니다.
정리
offsetX 속성은 이벤트 대상 요소를 기준으로 한 마우스 포인터의 X 좌표를 제공하며, offsetY와 함께 사용하면 요소 내부의 2차원 좌표를 정밀하게 추적할 수 있습니다. 마우스 위치 기반 인터랙션, 게임 로직, 사용자 행동 분석 등 다양한 상황에서 활용해 보세요.