속성 event.clientX
속성 event.clientX는
X축 마우스 커서 좌표를 포함합니다.
좌표를 결정하기 위한 다른 속성들로는
event.clientY,
event.pageX,
event.pageY가 있습니다.
clientX/clientY와
pageX/pageY 사이의 차이점을 살펴보겠습니다.
clientX와 clientY의 동작 방식:
1000 x 1000
픽셀 크기의 창이 있고 마우스가 중앙에 있다면, clientX
와 clientY는 둘 다 500이 됩니다. 만약
그 후 커서를 움직이지 않고 페이지를 수평 또는 수직으로
스크롤하더라도, 값들은
문서가 아닌 창을 기준으로 측정되기 때문에
clientX와 clientY는 변경되지 않습니다.
pageX와 pageY의 동작 방식:
1000 x 1000
픽셀 크기의 창이 있고 커서가 중앙에 있다면,
pageX와 pageY는 500이 됩니다. 만약
그 후 페이지를 250
픽셀 아래로 스크롤하면, pageY는 750이 됩니다.
따라서 pageX와 pageY는 스크롤을 고려한
이벤트 좌표를 포함합니다.
문법
event.clientX;
예제
페이지 위에서 마우스를 움직일 때마다
브라우저 창에 상대적인 좌표
(clientX와 clientY)를 출력하겠습니다:
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
