마우스 이벤트(client, page, offset, screen)의 차이점

client

브라우저 창 기준으로 마우스 클릭 위치의 x, y좌표를 나타냅니다. 스크롤바가 있어도 스크롤바를 제외한 브라우저의 좌측 상단을 원점으로 삼습니다.

page

문서 전체를 기준으로 마우스 클릭 위치의 x, y좌표를 나타냅니다. 스크롤바를 포함한 문서의 좌측 상단을 원점으로 삼습니다

offset

이벤트 대상 엘리먼트를 기준으로 마우스 클릭 위치의 x, y좌표를 나타냅니다. 이벤트가 발생한 엘리먼트의 좌측 상단을 원점으로 삼습니다.

screen

모니터 화면 전체를 기준으로 마우스 클릭 위치의 x, y좌표를 나타냅니다.

 

<div style="width: 300px; height: 300px; background-color: red; display:flex; align-items: center; justify-content: center;" id="box">마우스 클릭</div>
<div id="show" style="margin-top: 20px;">
  clientX : 0, clientY : 0<br/>
  pageX : 0, pageY : 0<br/>
  offsetX : 0, offsetY : 0<br/>
  screenX : 0, screenY : 0
</div>
<script>
  const box = document.getElementById('box');
  const show = document.getElementById('show');
  box.addEventListener('click', (e) => {
    show.innerHTML = `
      clientX : ${e.clientX}, clientY : ${e.clientY}<br/>
      pageX : ${e.pageX}, pageY : ${e.pageY}<br/>
      offsetX : ${e.offsetX}, offsetY : ${e.offsetY}<br/>
      screenX : ${e.screenX}, screenY : ${e.screenY}
    `
  });
</script>

 

마우스 클릭

clientX : 0, clientY : 0

pageX : 0, pageY : 0

offsetX : 0, offsetY : 0

screenX : 0, screenY : 0