[JS/JQ] 마우스의 위치, 좌표값을 구하는 방법

 

 

 

마우스의 위치, 좌표값을 구하는 방법

 

 

제이쿼리를 사용하여 마우스 커서가 위치한 값을 얻기 위해서는 마우스를 사용하는 이벤트 객체를 사용해야 한다.

 

 

 [event.pageX / event.pageY]

 

빈 공간을 클릭해 주세요.

<script> $(document).ready(function(){    $(".mouse_p_b").click(function(envet){     var x = event.pageX;    var	y = event.pageY;		
   alert("\n마우스 커서 좌표값\n\n X좌표 : " + x + " , Y좌표 : " + y + " 입니다.");    }) });  </script>

 

위 박스안을 클릭했을때 마우스 좌표값 x, y를 알림창으로 띄우는 제이쿼리 소스입니다. 

 

x값은 event.pageX, y값은 event.pageY를 사용하며, Document 즉 문서전체를 기준으로한 마우스 커서의 좌표값을 가져옵니다. 브라우저의 크기가 달라도 전체문서를 기준으로 하기 때문에 마우스 좌표값은 유지됩니다.

 

 

 [client.pageX / client.pageY]

 

빈 공간을 클릭해 주세요.

<script> $(document).ready(function(){    $(".mouse_p_b2").click(function(envet){     var x = event.clientX;    var	y = event.clientY;		
   alert("\n마우스 커서 좌표값\n\n X좌표 : " + x + " , Y좌표 : " + y + " 입니다.");    }) });  </script>

 

현재 브라우저를 기준으로 마우스 커서의 위치값을 구하려면 event.clientX와 event.clientY를 사용하면 됩니다.

 

브라우저의 크기, 보는 위치에 따라서 x좌표와 y좌표의 위치가 달라집니다.

 

 

 

 

[JS] 마우스를 방향에 따라 움직이는 HTML 오브젝트

 

[JS] 마우스 이벤트 좌표 메서드