MouseEvent：movementX 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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">移动鼠标。</p>

JavaScript

js
function logMovement(event) {
  log.insertAdjacentHTML(
    "afterbegin",
    `movement: ${event.movementX}, ${event.movementY}<br>`,
  );
  while (log.childNodes.length > 128) log.lastChild.remove();
}

const log = document.getElementById("log");
document.addEventListener("mousemove", logMovement);

结果

规范

Specification
Pointer Lock 2.0
# dom-mouseevent-movementx

浏览器兼容性

BCD tables only load in the browser

参见