마우스 이벤트가 발생했을 때 clientY 속성은 마우스 포인터의 세로(Y) 좌표를 반환하는 데 사용됩니다. 이때 좌표의 기준은 현재 브라우저 창(뷰포트)입니다.
clientY 속성의 특징
clientY는 뷰포트를 기준으로 하기 때문에 페이지가 스크롤되어도 창 내에서의 상대적인 위치 값이 유지된다는 점이 특징입니다. 참고로 유사한 속성들과의 차이는 다음과 같습니다.
- clientY: 브라우저 창(뷰포트) 기준의 세로 좌표
- pageY: 문서 전체 기준의 세로 좌표 (스크롤 거리 포함)
- 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>실행 결과 예시
문단 영역을 클릭하면 다음과 같은 형태로 좌표가 출력됩니다.
X 좌표 = 152, Y 좌표 = 87
이처럼 clientY 속성은 툴팁 위치 지정, 드래그 앤 드롭 구현, 캔버스 그리기 등 마우스 위치가 필요한 다양한 인터랙션에서 활용됩니다.