Element：mousemove 事件

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.

mousemove 事件在定点设备（通常指鼠标）的光标在元素内移动时，会在该元素上触发。

语法

在类似 addEventListener() 这样的方法中使用事件名称，或者设置事件处理器属性。

js
addEventListener("mousemove", (event) => {});

onmousemove = (event) => {};

事件类型

一个 MouseEvent。继承自 Event。

Event UIEvent MouseEvent

事件属性

这个接口也继承其父接口 UIEvent 和 Event 的属性。

MouseEvent.altKey 只读

当鼠标事件被触发时，如果 alt 键已被按下，返回 true。

MouseEvent.button 只读

触发鼠标事件时，按下按钮的编号（如果适用）。

MouseEvent.buttons 只读

触发鼠标事件时，按下的按钮（如果存在）。

MouseEvent.clientX 只读

鼠标指针相对于局部 DOM 元素的 X 轴坐标。

MouseEvent.clientY 只读

鼠标指针相对于局部 DOM 元素的 Y 轴坐标。

MouseEvent.ctrlKey 只读

当鼠标事件被触发时，如果 control 键已被按下，返回 true。

MouseEvent.layerX 只读

返回事件相对于当前层的水平坐标。

MouseEvent.layerY 只读

返回事件相对于当前层的垂直坐标。

MouseEvent.metaKey 只读

当鼠标事件被触发时，如果 meta 键已被按下，返回 true。

MouseEvent.movementX 只读

鼠标指针相对于最后一次 mousemove 事件位置的 X 轴坐标。

MouseEvent.movementY 只读

鼠标指针相对于最后一次 mousemove 事件位置的 Y 轴坐标。

MouseEvent.offsetX 只读

鼠标指针相对于目标节点的内填充边的 X 轴坐标。

MouseEvent.offsetY 只读

鼠标指针相对于目标节点的内填充边的 Y 轴坐标。

MouseEvent.pageX 只读

鼠标指针相对于整个文档的 X 轴坐标。

MouseEvent.pageY 只读

鼠标指针相对于整个文档的 Y 轴坐标。

MouseEvent.relatedTarget 只读

事件的次要目标（如果存在）。

MouseEvent.screenX 只读

鼠标指针相对于屏幕的 X 轴坐标。

MouseEvent.screenY 只读

鼠标指针相对于屏幕的 Y 轴坐标。

MouseEvent.shiftKey 只读

当鼠标事件被触发时，如果 shift 键已被按下，返回 true。

MouseEvent.mozInputSource 只读

生成事件的设备类型（MOZ_SOURCE_* 常量之一）。例如，这允许你决定鼠标事件是否由实际的鼠标还是触摸事件生成（这可能会在一定程度影响你对事件相关坐标判断的准确性）。

MouseEvent.webkitForce 只读

单击时施加的压力大小。

MouseEvent.x 只读

MouseEvent.clientX 的别名。

MouseEvent.y 只读

MouseEvent.clientY 的别名。

示例

下面的例子将使用 mousedown、mousemove 以及 mouseup 事件，实现一个允许用户在 HTML canvas 上绘图的功能。它的功能很简单：直线的粗细设置为 1，颜色始终为黑色。

当页面加载时，我们使用常量 myPics 和 context 分别保存将用于绘制的 ID 为 myPics 的 canvas 元素和 2d 上下文。

当 mousedown 事件被触发时，绘图也开始了。首先，我们将鼠标的 x 坐标和 y 坐标分别赋值给变量 x 和 y，然后设置 isDrawing 为 true。

当鼠标在页面上移动时，mousemove 事件被触发。当 isDrawing 为 true 时，事件处理器将会调用 drawLine 函数，该函数从变量 x 和 y 所指的位置开始到鼠标现在所在的位置画一条线。

当 drawLine() 调用结束时，我们需要把调整后的坐标赋值到 x 和 y 中。

mouseup 事件绘制图形的最后一段，并把 x 和 y 设置为 0。通过把设置 isDrawing 为 false 以停止绘制。

HTML

html
<h1>使用鼠标事件绘制</h1>
<canvas id="myPics" width="560" height="360"></canvas>

CSS

css
canvas {
  border: 1px solid black;
  width: 560px;
  height: 360px;
}

JavaScript

js
// 如果为 true 时，移动鼠标会在画布上绘制
let isDrawing = false;
let x = 0;
let y = 0;

const myPics = document.getElementById("myPics");
const context = myPics.getContext("2d");

// event.offsetX 与 event.offsetY 给出与画布边缘的 (x,y) 的偏移量。

// 向 mousedown、mousemove 与 mouseup 事件添加事件侦听器
myPics.addEventListener("mousedown", (e) => {
  x = e.offsetX;
  y = e.offsetY;
  isDrawing = true;
});

myPics.addEventListener("mousemove", (e) => {
  if (isDrawing) {
    drawLine(context, x, y, e.offsetX, e.offsetY);
    x = e.offsetX;
    y = e.offsetY;
  }
});

window.addEventListener("mouseup", (e) => {
  if (isDrawing) {
    drawLine(context, x, y, e.offsetX, e.offsetY);
    x = 0;
    y = 0;
    isDrawing = false;
  }
});

function drawLine(context, x1, y1, x2, y2) {
  context.beginPath();
  context.strokeStyle = "black";
  context.lineWidth = 1;
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.stroke();
  context.closePath();
}

结果

规范

Specification
UI Events
# event-type-mousemove
HTML
# handler-onmousemove

浏览器兼容性

参见