Element：mousemove 事件

语法

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

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

事件类型

一个 MouseEvent。继承自 Event。

事件属性

这个接口也继承其父接口 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

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

CSS

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

JavaScript

// 如果为 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(); } 

结果

规范

浏览器兼容性

参见

• 事件介绍
• mousedown
• mouseup
• click
• dblclick
• mouseover
• mouseout
• mouseenter
• mouseleave
• contextmenu