MouseEvent 클라이언트Y 속성
예시
요소에서 마우스 버튼을 클릭할 때 마우스 포인터의 좌표를 출력합니다.
var x = event.clientX; // Get the horizontal coordinate
var y = event.clientY; // Get the vertical coordinate
var coor = "X coords: " + x + ", Y coords: " + y;
coor 의 결과는 다음과 같을 수 있습니다.
X coords: 142, Y coords: 99
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
clientY 속성은 마우스 이벤트가 트리거되었을 때 마우스 포인터의 수직 좌표(클라이언트 영역에 따라)를 반환합니다.
클라이언트 영역은 현재 창입니다.
팁: 마우스 포인터의 수평 좌표(클라이언트 영역에 따라)를 얻으려면 clientX 속성을 사용하십시오.
참고: 이 속성은 읽기 전용입니다.
브라우저 지원
Property | |||||
---|---|---|---|---|---|
clientY | Yes | Yes | Yes | Yes | Yes |
통사론
event.clientY
기술적 세부 사항
반환 값: | 마우스 포인터의 수직 좌표를 나타내는 숫자(픽셀) |
---|---|
DOM 버전: | DOM 레벨 2 이벤트 |
더 많은 예
예시
마우스 포인터가 요소 위로 이동하는 동안 마우스 포인터의 좌표를 출력합니다.
var x = event.clientX;
var y = event.clientY;
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;
예시
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;
관련 페이지
HTML DOM 참조: MouseEvent clientX 속성
HTML DOM 참조: MouseEvent screenX 속성
HTML DOM 참조: MouseEvent screenY 속성
HTML DOM 참조: MouseEvent offsetX 속성
HTML DOM 참조: MouseEvent offsetY 속성