Element:mousemove 事件

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

语法

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

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

onmousemove = (event) => {};

事件类型

事件属性

这个接口也继承其父接口 UIEventEvent 的属性。

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 的别名。

示例

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

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

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

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

drawLine() 调用结束时,我们需要把调整后的坐标赋值到 xy 中。

mouseup 事件绘制图形的最后一段,并把 xy 设置为 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

参见