[JS] clientX, offsetX, pageX, screenX의 차이

 

clientX, clientY

위 메서드는 클라이언트 영역 내의 가로,세로 좌표를 제공합니다. 여기서 클라이언트 영역은 현재 보이는 브라우저 화면이 기준이 됩니다.

clientX : 브라우저 페이지에서의 X좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정합니다.

clientY : 브라우저 페이지에서의 Y좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정합니다.

offsetX, offsetY

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

전체 문서를 기준으로 합니다(스크롤 화면 포함)

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

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

pageX, pageY

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

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

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

screenX, screenY

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

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

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

 

 

 

출처 : https://megaton111.cafe24.com/2016/11/29/clientx-offsetx-pagex-screenx%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90/