鼠标事件：movementX 属性

基线 广泛可用

此功能已建立并可在许多设备和浏览器版本上运行。它从以下时间起在所有浏览器中可用： 2015 年 7 月.

movementX 是 MouseEvent 接口的只读属性，它提供给定事件和之前 mousemove 事件之间鼠标指针 X 坐标的差异。换句话说，该属性的值按如下方式计算：currentEvent.movementX = currentEvent.screenX - previousEvent.screenX。

警告：浏览器 对 movementX 和 screenX 使用的单位与规范中定义的单位不同。根据浏览器和操作系统的不同，movementX 单位可能是物理像素、逻辑像素或 CSS 像素。您可能希望避免使用运动属性，而是计算当前客户端值（screenX、screenY）和之前客户端值之间的增量。

值

一个数字。在除 mousemove 之外的任何 MouseEvent 上始终为零。

示例

此示例使用 movementX 和 movementY 记录鼠标移动量。

HTML

html
<p id="log">Move your mouse around.</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);

结果

规范

规范
指针锁定 2.0
# dom-mouseevent-movementx

浏览器兼容性

BCD 表仅在启用了 JavaScript 的浏览器中加载。

另请参阅