MouseEvent pageY 속성

DOM 이벤트 MouseEvent

정의와 사용법

마우스 이벤트가 트리거될 때, pageY 속성은 마우스 포인터의 수직 좌표(문서 상대)를 반환합니다。

문서는 웹 페이지입니다。

훌륭한 조언：마우스 포인터의 수평 좌표(문서 상대)를 가져오려면 pageX 속성。

주의사항：이 속성은 읽기 전용입니다。

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

예제

예제 1

마우스 버튼을 요소 위에서 클릭할 때 마우스 포인터의 좌표를 출력합니다:

var x = event.pageX;     // 수평 좌표를 가져옵니다
var y = event.pageY;     // 수직 좌표를 가져옵니다
var coor = "X 좌표: " + x + ", Y 좌표: " + y;

직접 시험해 보세요

예제 2

마우스 포인터가 요소 위에서 움직일 때 마우스 포인터의 좌표를 출력합니다:

var x = event.pageX;
var y = event.pageY; 
var coor = "X 좌표: " + x + ", Y 좌표: " + y;
document.getElementById("demo").innerHTML = coor;

직접 시험해 보세요

예제 3

clientX와 clientY 및 screenX와 screenY 간의 차이를 보여주는 데 대한 설명:

var pX = event.pageX;
var cX = event.clientX;
var pY = event.pageY;
var cY = event.clientY;
var coords1 = "page - X: " + pX + ", Y 좌표: " + pY;
var coords2 = "client - X: " + cX + ", Y 좌표: " + cY;

직접 시험해 보세요

문법

event.pageY

기술 세부 사항

반환 값： 숫자 값으로, 마우스 포인터의 수직 좌표를 픽셀로 표시합니다。
DOM 버전： 없음。

브라우저 지원

속성 Chrome IE Firefox 사파리 오페라
pageY 지원 12.0 지원 지원 지원

관련 페이지

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

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

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

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

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

DOM 이벤트 MouseEvent