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

参见