[js] Coordinates

1. clientX,Y

브라우저 화면 기준 현재 좌표.
마우스를 움직이지 않으면 스크롤 해도 같은 값.

2. offsetX,Y

이벤트 대상 기준 (왼쪽 모서리) 현재 마우스의 상대적 좌표.

3. pageX,Y

전체 문서 기준 현재 좌표.
스크롤 시 문서 기준 마우스의 위치가 바뀌기 때문에 값이 바뀜.

4. screenX,Y

모니터 화면 전체 기준 현재 좌표.
브라우저 창을 움직여도 같은 값.

see also : elementFromPoint()

client 좌표를 이용해서 현재 마우스가 올라간 element를 찾는다.

document.addEventListener('mousemove', e => {
  console.log( document.elementFromPoint(e.clientX, e.clientY) );
});

References

[1] clientX, offsetX, pageX, screenX의 차이
[2] Determine which element the mouse pointer is on top of in JavaScript - stack overflow