MouseEvent clientY 속성

DOM 이벤트 MouseEvent

정의와 사용법

마우스 이벤트가 트리거될 때, clientY 속성은 마우스 포인터의 수직 좌표(클라이언트 영역에 따라)를 반환합니다.

클라이언트 영역은 현재 창입니다.

푸시:마우스 포인터의 수평 좌표(클라이언트 영역에 따라)를 가져오려면 사용하세요 clientX 속성.

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

예제

예제 1

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

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

결과는 다음과 같습니다：

X coords: 142, Y coords: 99

직접 시험해 보세요

예제 2

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

var x = event.clientX;
var y = event.clientY; 
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;

직접 시험해 보세요

예제 3

clientX와 clientY 및 screenX와 screenY 간의 차이를 보여줍니다:

var cX = event.clientX;
var sX = event.screenX;
var cY = event.clientY;
var sY = event.screenY;
var coords1 = "client - X: " + cX + ", Y coords: " + cY;
var coords2 = "screen - X: " + sX + ", Y coords: " + sY;

직접 시험해 보세요

문법

이벤트.clientY

기술 세부 사항

반환 값： 숫자 값, 마우스 포인터의 수직 좌표를 픽셀로 표시합니다.
DOM 버전： DOM Level 2 Events

브라우저 지원

속성 Chrome IE 파이어폭스 사파리 오페라
clientY 지원 지원 지원 지원 지원

관련 페이지

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

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

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

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

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

DOM 이벤트 MouseEvent