元素：mousemove 事件

基线 广泛可用

此功能已经很成熟，并且可以在许多设备和浏览器版本上使用。它自 2015 年 7 月.

当指向设备（通常是鼠标）在光标热点在元素内部时移动时，就会在该元素上触发 mousemove 事件。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

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

onmousemove = (event) => {};

事件类型

MouseEvent。继承自 UIEvent 和 Event。

Event UIEvent MouseEvent

事件属性

此接口还继承了其父级 UIEvent 和 Event 的属性。

MouseEvent.altKey 只读

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

MouseEvent.button 只读

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

MouseEvent.buttons 只读

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

MouseEvent.clientX 只读

鼠标指针在 视窗坐标 中的 X 坐标。

MouseEvent.clientY 只读

鼠标指针在 视窗坐标 中的 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 被创建以存储对画布和我们将用于绘制的 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>Drawing with mouse events</h1>
<canvas id="myPics" width="560" height="360"></canvas>

CSS

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

JavaScript

js
// When true, moving the mouse draws on the canvas
let isDrawing = false;
let x = 0;
let y = 0;

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

// event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.

// Add the event listeners for mousedown, mousemove, and 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();
}

结果

规范

规范
UI 事件
# event-type-mousemove
HTML 标准
# handler-onmousemove

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅