과목 추천:

DOM 이벤트 MouseEvent

MouseEvent pageX 속성

정의와 사용법

마우스 이벤트가 발생할 때, pageX 속성은 마우스 포인터의 수평 좌표(문서 상대)를 반환합니다.

문서는 웹 페이지입니다.ヒント: 마우스 포인터의 수직 좌표(문서 상대)를 가져오기 위해 사용하세요pageY 속성

이 속성은 읽기 전용입니다..

이 속성은 읽기 전용입니다.주의:

이 속성은 비표준적이지만 대부분의 주요 브라우저에 적용됩니다.

예제

예제 1

마우스 버튼을 요소 위에서 클릭할 때 마우스 포인터의 좌표를 출력합니다:
var x = event.pageX;     // 수평 좌표를 가져옵니다
var y = event.pageY;

var coords2 = "screen - X: " + cX + ", Y coords: " + cY;

var y = event.pageY; // 수직 좌표를 가져옵니다

예제 2

마우스 포인터가 요소 위에서 이동할 때의 좌표를 출력합니다:
var x = event.pageX; 
var y = event.pageY;
var coor = "X coords: " + x + ", Y coords: " + y;

var coords2 = "screen - X: " + cX + ", Y coords: " + cY;

document.getElementById("demo").innerHTML = coor;

예제 3

페이지 X와 페이지 Y 및 스크린 X와 스크린 Y 간의 차이를 보여주는 예제:
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;

직접 테스트해 보세요

이벤트.pageX

기술 세부 사항

반환 값: 숫자로 표시되며, 마우스 포인터의 수평 좌표를 픽셀 단위로 나타냅니다.
DOM 버전: 없음。

브라우저 지원

속성 크롬 IE 파이어폭스 사파리 오페라
pageX 지원 12.0 지원 지원 지원

관련 페이지

HTML DOM 참조 설명서:MouseEvent pageY 속성

HTML DOM 참조 설명서:MouseEvent clientX 속성

HTML DOM 참조 설명서:MouseEvent clientY 속성

HTML DOM 참조 설명서:MouseEvent screenX 속성

HTML DOM 참조 설명서:MouseEvent screenY 속성

DOM 이벤트 MouseEvent