Element：mousemove 事件

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 (en-US) 只读

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

MouseEvent.layerY (en-US) 只读

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

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 (en-US) 只读

单击时施加的压力大小。

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 Standard
# handler-onmousemove

浏览器兼容性

BCD tables only load in the browser

参见