MouseEvent: movementX 屬性
MouseEvent 介面的只讀屬性 movementX 提供了給定事件與上一個 mousemove 事件之間滑鼠指標 X 座標的差值。換句話說,該屬性的值計算如下:currentEvent.movementX = currentEvent.screenX - previousEvent.screenX。
警告: 瀏覽器 使用的 movementX 和 screenX 單位與規範定義的單位不同。根據瀏覽器和作業系統,movementX 的單位可能是物理畫素、邏輯畫素或 CSS 畫素。您可能希望避免使用 movement 屬性,而是計算當前客戶端值(screenX, screenY)與先前客戶端值之間的差值。
值
一個數字。除 mousemove 事件外,所有 MouseEvent 事件均始終為零。
示例
此示例使用 movementX 和 movementY 記錄滑鼠移動量。
HTML
html
<p id="log">Move your mouse around.</p>
JavaScript
js
const log = document.getElementById("log");
function logMovement(event) {
log.insertAdjacentHTML(
"afterbegin",
`movement: ${event.movementX}, ${event.movementY}<br>`,
);
while (log.childNodes.length > 128) log.lastChild.remove();
}
document.addEventListener("mousemove", logMovement);
結果
規範
| 規範 |
|---|
| 指標鎖定 2.0 # dom-mouseevent-movementx |
瀏覽器相容性
載入中…