mousemove
当指针设备 ( 通常指鼠标 ) 在元素上移动时,mousemove 事件被触发。
基本信息
是否冒泡 | Yes |
---|---|
是否可取消 | Yes |
接口 | MouseEvent |
事件处理 | onmousemove |
示例
下面的例子将使用 mousedown
, mousemove
以及 mouseup
事件,实现一个允许用户在 HTML5 canvas绘图的功能。这个例子的功能很简单:线的粗细设置为 1,颜色始终为黑色。
当页面加载完成,我们使用变量 myPics
和context
分别保存 ID 为myPics
的 DOM 元素和接下来需要加工的的 2d 元素。
当mousedown
事件被触发时,绘图也开始了。首先,我们将鼠标的x
坐标和y
坐标分别赋值给变量x
和y
,然后设置isDrawing
为true
。
当鼠标在页面上移动时,mousemove
事件被触发。当isDrawing
为 true 时,事件处理程序将会调用drawLine
函数,该函数从变量x
和y
所指的位置开始,到现在鼠标所在的位置,画一条线。
当drawLine()
调用结束时,我们需要把坐标赋值到x
和y
中。
mouseup
事件绘制图形的最后一段,并把x
和y
设置为 0.通过设置 isDra
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');
// The x and y offset of the canvas from the edge of the page
const rect = myPics.getBoundingClientRect();
// Add the event listeners for mousedown, mousemove, and mouseup
myPics.addEventListener('mousedown', e => {
x = e.clientX - rect.left;
y = e.clientY - rect.top;
isDrawing = true;
});
myPics.addEventListener('mousemove', e => {
if (isDrawing === true) {
drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
x = e.clientX - rect.left;
y = e.clientY - rect.top;
}
});
window.addEventListener('mouseup', e => {
if (isDrawing === true) {
drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
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