마우스 클릭 위치 구하기 clientX, clientY, pageX, pageY

 

1. 윈도우 기준으로 클릭한 전역 위치 구하기

mouseEvent.clientX
mouseEvent.clientY

윈도우 내부 영역 기준으로 한 마우스 커서의 X, Y 좌표값 (윈도우 창 크기만큼 / 스크롤은 반영되지 않음)

 

2. 문서를 기준으로 클릭한 전역 위치 구하기

mouseEvent.pageX
mouseEvent.pageY

 

실제 문서 영역 기준의 마우스 커서 좌표 문서의 스크롤 값이 적용된 값

 

 

 

#panel에서 버튼 클릭한 위치값 알아내기

$("#panel").click(function(e){
    var clickInfo = `clientX:${e.clientX}, clientY:${e.clientY}, pageX:${e.pageX}, pageY:${e.pageY}`;
    console.log(clickInfo);
})

 

 

 

 

 

 

 

이미지 출처 : https://quizlet.com/