[JavaScript] 클릭된 위치 이벤트

Posted by 김성철

클릭한 위치 이벤트

전체 페이지에서 좌표 가져오기

자바스크립트에서 마우스로 클릭한 위치를 찾아야 할 때가 있음  
아래와 같이 사용하면 해당 페이지내에서의 좌표를 가져 올 수 있음  
event.pageX  
event.pageY  
  
=================================================================================================================  
$("div##div_Popup_update").css({"left": event.pageX - 200 + "px"});  
$("div##div_Popup_update").css({"top": event.pageY - 100 + "px"});  
$("div##div_Popup_update").show("fast");  
  
=================================================================================================================  

현재 표시되는 화면에서만 좌표 가져오기

event.clientX, event.clientY는 브라우저 클라이언트 영역의 좌측상단을 기준으로 측정된 좌표이며  
스크롤이 되지 않은 상태에선 같은 값을 가지게 되지만,  
스크롤이 된 상태라면 좌푝밧이 스크롤 된 양에 따라 달라짐  
  
event.clientX;  
event.clientY;  
  
이를 일치시키려면 클라이언트 좌표에 스크롤 된 양을 더해서 계산에 포함시켜야 함  
document.getElementById(obj).style.left = event.clientX + document.body.scrollLeft + ‘px’;  
document.getElementById(obj).style.top = event.clientY + document.body.scrollTop + ‘px’;