[jQuery]마우스 클릭한 위치 값 가져오기

 

마우스 클릭 좌표값 가져오는 이벤트 객체 종류

 

pageX, pageY

웹브라우저 전체 페이지의 왼쪽 가장자리를 기준으로 좌표를 표시

문서의가장 자리를 기준으로 하기 때문에 스크롤을 고려하여 스크롤될 때마다 좌표값이 변경 된다.

event.pageX //x위치 값
event.pageY //y위치 값

 

clientX, clientY

사용자에게 보여지는 페이지 영역 기준 좌표를 표시

스크롤바가 존재하고, 스크롤 되더라도 특정 지점의 clientX, clientY 값은 동일하다.

event.clientX //x위치 값
event.clientY //y위치 값

 

screenX, screenY

사용자 모니터 화면 기준으로 왼쪽 상단 모서리(0, 0)부터 좌표값 표시

event.screenX //x위치 값
event.screenY //y위치 값

 

offsetX, offsetY

좌표를 출력하도록하는 이벤트가 걸려있는 DOM node를 기준으로 좌표를 표시

특정 div 영역에서 offsetX, offsetY를 출력한다면, div의 왼쪽 상단 모서리(0,0) 부터 좌표값 표시

event.offsetX //x위치 값
event.offsetY //y위치 값

 

 

<div id="log"></div>
 
<script>
$( document ).on( "mousemove", function( event ) {
  $( "#log" ).html(
     "pageX: " + event.pageX + ", pageY: " + event.pageY +"<p>"+
     "clientX: " + event.clientX + ", clientY: " + event.clientY +"<p>"+
     "screenX: " + event.screenX + ", screenY: " + event.screenY +"<p>"+
     "offsetX: " + event.offsetX + ", offsetY: " + event.offsetY +"<p>"
     );
});
</script>