MouseEvent pageX 속성
예시
요소에서 마우스 버튼을 클릭할 때 마우스 포인터의 좌표를 출력합니다.
var x = event.pageX; // Get the horizontal coordinate
var y = event.pageY; // Get the vertical coordinate
var coor = "X coords: " + x + ", Y coords: " + y;
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
pageX 속성은 마우스 이벤트가 트리거되었을 때 마우스 포인터의 수평 좌표(문서에 따라)를 반환합니다.
문서는 웹 페이지입니다.
팁: 마우스 포인터의 수직 좌표(문서에 따라)를 얻으려면 pageY 속성을 사용하십시오.
참고: 이 속성은 읽기 전용입니다.
참고: 이 속성은 비표준이지만 대부분의 주요 브라우저에서 작동합니다.
브라우저 지원
| Property | |||||
|---|---|---|---|---|---|
| pageX | Yes | 12.0 | Yes | Yes | Yes |
통사론
event.pageX
기술적 세부 사항
| 반환 값: | 마우스 포인터의 수평 좌표를 나타내는 숫자(픽셀) |
|---|---|
| DOM 버전: | 없음 |
더 많은 예
예시
마우스 포인터가 요소 위로 이동하는 동안 마우스 포인터의 좌표를 출력합니다.
var x = event.pageX;
var y = event.pageY;
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;
예시
pageX와 pageY, screenX와 screenY의 차이점에 대한 데모:
var pX = event.screenX;
var cX = event.pageX;
var pY = event.screenY;
var cY = event.pageY;
var coords1 = "page - X: " + pX + ", Y coords: " + pY;
var coords2 = "screen - X: " + cX + ", Y coords: " + cY;
관련 페이지
HTML DOM 참조: MouseEvent pageY 속성
HTML DOM 참조: MouseEvent clientX 속성
HTML DOM 참조: MouseEvent clientY 속성
HTML DOM 참조: MouseEvent screenX 속성
HTML DOM 참조: MouseEvent screenY 속성