[HTML/CSS] 요소 왼쪽/위쪽 변부터 클릭 지점까지 거리 구하기

주황색 화살표가 가리키는 곳이 클릭한 지점. ELEMENT의 왼쪽/위쪽 변부터 화살표까지 거리가 x,y

 

// left = clientRect.x, top = clientRect.y
const { height, width, top, left } = element.getBoundingClientRect();

// event.clientX, event.clientY는 마우스 이벤트 속성
const x = event.clientX - left;
const y = event.clientY - top;

 

• mouseEvent.clientX, mouseEvent.clientY : 브라우저 화면 왼쪽 최상단을 기준으로 이벤트가 발생한 지점까지 얼마나 떨어져 있는지 나타내는 좌표. 브라우저 화면이 기준이므로 스크롤해도 값이 변하지 않음.
• clientRect.x, clientRect.left : 화면 좌측부터 해당 엘리먼트의 왼쪽 변까지의 거리
• clientRect.y, clientRect.top : 화면 상단부터 해당 엘리먼트의 위쪽 변까지의 거리