Element:mousemove 事件
mousemove
事件在定点设备(通常指鼠标)的光标在元素内移动时,会在该元素上触发。
语法
在类似 addEventListener()
这样的方法中使用事件名称,或者设置事件处理器属性。
addEventListener("mousemove", (event) => {});
onmousemove = (event) => {};
事件类型
一个 MouseEvent
。继承自 Event
。
事件属性
这个接口也继承其父接口 UIEvent
和 Event
的属性。
MouseEvent.altKey
只读-
当鼠标事件被触发时,如果 alt 键已被按下,返回
true
。 -
触发鼠标事件时,按下按钮的编号(如果适用)。
-
触发鼠标事件时,按下的按钮(如果存在)。
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.screenX
只读-
鼠标指针相对于屏幕的 X 轴坐标。
MouseEvent.screenY
只读-
鼠标指针相对于屏幕的 Y 轴坐标。
MouseEvent.shiftKey
只读-
当鼠标事件被触发时,如果 shift 键已被按下,返回
true
。 MouseEvent.mozPressure
非标准 已弃用 只读-
产生事件时施加到触摸或平板电脑设备的压力量;该值在 0.0(最小压力)和 1.0(最大压力)之间。你应该使用
PointerEvent
并查看pressure
(en-US) 属性,而不是使用此废弃的(和非标准)属性。 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
<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();
}
结果
规范
Specification |
---|
UI Events # event-type-mousemove |
HTML Standard # handler-onmousemove |
浏览器兼容性
BCD tables only load in the browser