[JAVASCRIPT] clientX, offsetX, pageX, screenX

(출처: https://gist.github.com/Palisanka/b9c03d21cdbb5e6e89d92dba6880297b )

1. clientX, clientY

클라이언트 영역 내의 가로, 세로 좌표를 제공한다.

클라이언트 영역은 현재 보이는 브라우저 화면이 기준.

 

clientX : 브라우저 페이지에서의 X좌표 위치를 반환.

clientY : 브라우저 페이지에서의 Y좌표 위치를 반환.

 

2. offsetX, offsetY

이벤트 대상이 기준이 된다.(화면 중간에 있는 박스 내부에서 클릭한 위치를 찾을 때 해당 박스의 왼쪽 모서리 좌표가 0이 된다. 화면이 기준이 아니다)

 

offsetX : 이벤트 대상 객체에서의 상대적 마우스 x좌표 위치를 반환.

offsetY : 이벤트 대상 객체에서의 상대적 마우스 y좌표 위치를 반환.

 

3. pageX, pageY

전체 문서를 기준으로 x,y 좌표를 반환. 스크롤 화면을 포함해서 측정.

pageX : 브라우저 페이지에서의 x좌표 위치를 반환합니다.

pageY : 브라우저 페이지에서의 Y좌표 위치를 반환합니다.

 

4. screenX, screenY

위 메서드는 모니터 화면을 기준으로 좌표를 제공한다. 여기서 중요한 점은 브라우저 화면이 아니라 자신의 모니터 화면 전체를 기준으로 좌표를 측정한다는 점.

screenX : 전체 모니터 스크린에서의 x좌표 위치를 반환

screenY :전체 모니터 스크린에서의 y좌표 위치를 반환