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 |
浏览器兼容性
加载中…