Thuộc tính event.pageX

Thuộc tính event.pageX chứa tọa độ con trỏ chuột theo trục X. Để xác định tọa độ cũng có các thuộc tính event.clientX, event.clientY, event.pageY. Hãy xem sự khác biệt giữa clientX/clientY và pageX/pageY.

Cách clientX và clientY hoạt động: nếu bạn có cửa sổ 1000 trên 1000 pixel, và con trỏ chuột ở chính giữa, thì clientX và clientY sẽ đều bằng 500. Nếu bạn sau đó cuộn trang theo chiều ngang hoặc dọc mà không di chuyển con trỏ, thì các giá trị clientX và clientY sẽ không thay đổi, vì chúng được tính tương đối so với cửa sổ, chứ không phải tài liệu.

Cách pageX và pageY hoạt động: nếu bạn có cửa sổ 1000 trên 1000 pixel, và con trỏ ở chính giữa, thì pageX và pageY sẽ bằng 500. Nếu bạn sau đó cuộn trang xuống 250 pixel, thì pageY sẽ trở thành 750. Như vậy pageX và pageY chứa tọa độ sự kiện có tính đến việc cuộn.

Cú pháp

javascriptevent.pageX;

Ví dụ

Khi di chuyển chuột trên trang, chúng ta sẽ hiển thị tọa độ của nó tương đối với cửa sổ trình duyệt (pageX và pageY):

html<div id="elem">0 : 0</div>

javascriptlet elem = document.getElementById('elem');

document.addEventListener('mousemove', function(event) {
  elem.innerHTML = event.pageX + ' : ' + event.pageY;
});

Результат:

Xem thêm