[jQuery] e.pageX / e.pageY

pageX => clientX / pageY => clientY와 비슷하다.

See the Pen [jQuery] e.pageX / e.pageY by mill (@millfeel) on CodePen.

 

 

브라우저상에서의 현재 마우스 커서의 위치 값을 구할 수 있다.

// 브라우저상 마우스 커서의 x축 좌표
e.pageX

// 브라우저상 마우스 커서의 y축 좌표
e.pageY

 

[JS와 비교하기]

// JS
window.addEventListener('mousemove', function (e) {
  const x = e.clientX;
  const y = e.clientY;
  document.querySelector('.posX').textContent = x;
  document.querySelector('.posY').textContent = y;
})

// jQuery
$(function () {
  $(window).mousemove(function (e) {
    const x = e.pageX;
    const y = e.pageY;
    $('.posX').text(x);
    $('.posY').text(y);
  })
});

---

[공부좌표]

인터랙티브 웹디자인북 p153