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
event.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):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
