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

javascriptevent.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):

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

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

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

Результат:

Xem thêm