MouseEvent: pageX 屬性

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

MouseEvent 介面的只讀屬性 pageX 返回滑鼠點選時相對於整個文件左邊緣的 X（水平）座標（以畫素為單位）。這包括了當前未顯示的文件的任何部分。

由於它是基於文件邊緣的，因此該屬性會考慮頁面上的任何水平滾動。例如，如果頁面滾動導致文件左側的 200 畫素內容不可見，而滑鼠在檢視左邊緣向內 100 畫素處單擊，則 pageX 返回的值將是 300。

最初，此屬性被定義為 long（長整型）整數。而 CSSOM View 模組將其重新定義為 double（雙精度浮點型）浮點數。詳情請參見瀏覽器相容性部分。

有關以這種方式指定的座標的更多資訊，請參見座標系統。

值

滑鼠點選時距離*文件*左邊緣的畫素值，以 double 浮點數表示，忽略任何可能生效的滾動或視口定位。

此屬性最初在 Touch Events 規範中被指定為長整型，但在 CSSOM View 模組中被重新定義為雙精度浮點數，以允許亞畫素精度。儘管在 JavaScript 中，兩種數值型別都表示為 Number，但在瀏覽器內部處理方式可能不同，從而可能導致行為差異。

請參閱瀏覽器相容性，瞭解哪些瀏覽器已更新以使用修訂後的資料型別。

示例

顯示滑鼠相對於頁面原點的位置

讓我們看一個示例，該示例顯示滑鼠相對於頁面原點的位置。由於此示例在 <iframe> 中呈現，因此左上角是框架的左上角，而不是瀏覽器視窗的左上角。

HTML

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 很簡單；我們將要監聽滑鼠事件的框被賦予了 "box" 類。它有兩個 <span> 元素，一個 ID 為 "x"，一個 ID 為 "y"。每次發生事件時，它們都會更新以包含相對於頁面的最新滑鼠座標。

CSS

此示例使用的 CSS 如下所示。

css

.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);

JavaScript 程式碼使用 addEventListener() 將 updateDisplay() 函式註冊為 mousemove、mouseenter 和 mouseleave 事件的事件處理程式。

updateDisplay() 將用於包含 X 和 Y 座標的 <span> 元素的內容替換為 pageX 和 pageY 的值。