Element：mousemove 事件
当定点设备（通常是鼠标）移动且光标热点在其内部时，会向元素触发 mousemove 事件。
无论是否按下任何鼠标按钮，都会发生这些事件。它们的触发频率可能非常高，这取决于用户移动鼠标的速度、机器的速度、正在发生的其他任务和进程等。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
addEventListener("mousemove", (event) => { })
onmousemove = (event) => { }
事件类型
一个 MouseEvent。继承自 UIEvent 和 Event。
事件属性
此接口还继承其父级 UIEvent 和 Event 的属性。
MouseEvent.altKey只读-
如果鼠标事件触发时 alt 键处于按下状态，则返回
true。 -
鼠标事件触发时按下的按钮编号（如果适用）。
-
鼠标事件触发时按下的按钮（如果有）。
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.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 以存储对 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>Drawing with mouse events</h1>
<canvas id="myPics" width="560" height="360"></canvas>
CSS
canvas {
border: 1px solid black;
width: 560px;
height: 360px;
}
JavaScript
// 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 |
浏览器兼容性
加载中…