[JavaScript] 마우스 클릭 좌표 (clientX, offsetX, pageX, screenX의 차이점 알아보기)

 

 

마우스 클릭 좌표 
(clientX, offsetX, pageX, screenX의 차이점 알아보기)

• 1. screenX, screenY
• 2. pageX, pageY
• 3. clientX, clientY
• 4. offsetX, offsetY

 

 

 

1. screenX, screenY

사용자 모니터 화면을 기준으로 좌표를 표시합니다.

screenX: 사용자 모니터 화면의 왼쪽 상단 모서리 지점을 0으로 측정하여 x좌표 위치를 반환합니다.

screenY: 사용자 모니터 화면의 왼쪽 상단 모서리 지점을 0으로 측정하여Y좌표 위치를 반환합니다.

 

2. pageX, pageY

전체 문서를 기준으로 좌표를 표시합니다.

스크롤바가 움직이게 되면 특정 지점의 pageY 좌표값도 변경 됩니다.

 

3. clientX,clientY

사용자에게 보여지는 브라우저 화면 영역을 기준으로 좌표를 표시합니다. 

스크롤바가 움직이더라도 값은 동일합니다.

clientX: 브라우저 화면 왼쪽 상단 지점을 0으로 측정하여 x좌표 위치를 반환합니다.

clientY : 브라우저 화면 왼쪽 상단 지점을 0으로 측정하여Y좌표 위치를 반환합니다.

 

4. offsetX, offsetY

이벤트가 걸려있는 요소를 기준으로 좌표를 표시합니다.

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

스크롤 화면이 포함된 전체 문서를 기준으로 합니다.

 

 

See the Pen offsetX, clientX, pageX, screenX의 차이점 by hy0ni (@hy0ni) on CodePen.