Thuộc tính event.clientX
Thuộc tính event.clientX chứa
tọa độ con trỏ chuột theo trục X.
Để xác định tọa độ còn có các thuộc tính
event.clientY,
event.pageX,
event.pageY.
Hãy xem sự khác biệt giữa clientX/clientY
và pageX/pageY.
Cách hoạt động của clientX và clientY:
nếu bạn có một cửa sổ 1000 trên 1000
pixel, và con trỏ chuột ở 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 hoạt động của pageX và pageY:
nếu bạn có một cửa sổ 1000 trên 1000
pixel, và con trỏ ở 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.clientX;
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;
});
:
