MouseEvent clientX 속성

DOM 이벤트 MouseEvent

정의와 사용법

마우스 이벤트가 발생할 때, clientX 속성은 마우스 포인터의 수평 좌표(클라이언트 영역에 따라)를 반환합니다.

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

훌륭합니다：마우스 포인터의 수직 좌표(클라이언트 영역에 따라)를 가져오려면 사용하세요 clientY 속성.

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

예제

예제 1

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

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

직접 시험해 보세요

예제 2

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

var x = 이벤트.clientX;
var y = 이벤트.clientY; 
var coor = "X 좌표: " + x + ", Y 좌표: " + y;
document.getElementById("demo").innerHTML = coor;

직접 시험해 보세요

예제 3

clientX와 clientY, screenX와 screenY 간의 차이를 보여주는 데 사용됩니다：

var cX = 이벤트.clientX;
var sX = 이벤트.screenX;
var cY = 이벤트.clientY;
var sY = 이벤트.screenY;
var coords1 = "클라이언트 - X: " + cX + ", Y 좌표: " + cY;
var coords2 = "스크린 - X: " + sX + ", Y 좌표: " + sY;

직접 시험해 보세요

문법

이벤트.clientX

기술 세부 사항

반환 값： 수치 값, 마우스 포인터의 수평 좌표를 픽셀로 표시합니다.
DOM 버전： DOM Level 2 이벤트

브라우저 지원

속성 크롬 IE 파이어폭스 사파리 오퍼라
clientX 지원 지원 지원 지원 지원

관련 페이지

HTML DOM 참조 가이드:MouseEvent clientY 속성

HTML DOM 참조 가이드:MouseEvent screenX 속성

HTML DOM 참조 가이드:MouseEvent screenY 속성

HTML DOM 참조 가이드:MouseEvent offsetX 속성

HTML DOM 참조 가이드:MouseEvent offsetY 속성

DOM 이벤트 MouseEvent