MouseEvent: pageX property

Giá trị

double số điểm ảnh có dấu phẩy động tính từ cạnh trái của document nơi chuột được nhấp vào, bất kể bất kỳ vị trí cuộn hoặc khung nhìn nào có thể có hiệu lực.

Thuộc tính này ban đầu được chỉ định trong đặc tả Sự kiện chạm dưới dạng số nguyên dài nhưng đã được xác định lại trong Mô-đun xem CSSOM thành số có độ chính xác kép số dấu phẩy động để cho phép độ chính xác của pixel phụ. Mặc dù cả hai loại số đều được biểu thị bằng Number trong JavaScript, chúng có thể được xử lý nội bộ khác nhau trong mã của trình duyệt, dẫn đến những khác biệt về hành vi tiềm ẩn.

Xem Khả năng tương thích của trình duyệt để biết trình duyệt nào đã được cập nhật để sử dụng loại dữ liệu đã sửa đổi.

Ví dụ

Hiển thị vị trí chuột liên quan đến nguồn gốc trang

Chúng ta hãy xem một ví dụ cho bạn thấy vị trí của chuột so với nguồn gốc của trang. Vì ví dụ này được trình bày trong <iframe> nên góc trên cùng bên trái đó là góc trên cùng bên trái của khung chứ không phải cửa sổ trình duyệt.

HTML

<div class="box">
  <p>Move the mouse around in this box to watch its coordinates change.</p>
  <p><code>pageX</code>: <span id="x">n/a</span></p>
  <p><code>pageY</code>: <span id="y">n/a</span></p>
</div>

HTML rất đơn giản; hộp mà chúng ta sẽ theo dõi các sự kiện chuột được gán cho lớp "box". Nó có hai phần tử <span>, một phần tử có ID "x" và một phần tử có ID "y". Chúng sẽ được cập nhật mỗi khi một sự kiện xảy ra để chứa tọa độ chuột mới nhất liên quan đến trang.

CSS

CSS được sử dụng cho ví dụ này được hiển thị bên dưới.

.box {
  width: 400px;
  height: 250px;
  border: 2px solid darkblue;
  background-color: blue;
  color: white;
  font:
    16px "Zilla",
    "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

JavaScript

const box = document.querySelector(".box");
const pageX = document.getElementById("x");
const pageY = document.getElementById("y");

function updateDisplay(event) {
  pageX.innerText = event.pageX;
  pageY.innerText = event.pageY;
}

box.addEventListener("mousemove", updateDisplay);
box.addEventListener("mouseenter", updateDisplay);
box.addEventListener("mouseleave", updateDisplay);

Mã JavaScript sử dụng addEventListener() để đăng ký hàm updateDisplay() làm trình xử lý sự kiện cho các sự kiện mousemove, mouseenter và mouseleave.

updateDisplay() thay thế nội dung của các phần tử <span> chứa tọa độ X và Y bằng các giá trị của pageX và pageY.

Kết quả

Hãy thử điều này ở đây:

Thêm ví dụ

Bạn cũng có thể xem ví dụ minh họa thông tin cách truy cập vị trí chuột trong mọi hệ tọa độ có sẵn.

Thông số kỹ thuật

Trước khi được thêm vào đặc tả CSSOM View, pageX và pageY đã có sẵn trên giao diện UIEvent trong một tập hợp con giới hạn các trình duyệt trong một thời gian ngắn.

Khả năng tương thích của trình duyệt

Xem thêm

• MouseEvent.pageY
• Hệ tọa độ