Thuộc tính event.clientY
Thuộc tính event.clientY chứa
tọa độ trục Y của con trỏ chuột.
Để xác định tọa độ còn có các thuộc tính
event.clientX,
event.pageX,
event.pageY.
Hãy cùng 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.clientY;
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 so với cửa sổ trình duyệt
(clientX và clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
