mousemove

当指针设备 ( 通常指鼠标 ) 在元素上移动时,mousemove 事件被触发。

基本信息

是否冒泡 Yes
是否可取消 Yes
接口 MouseEvent
事件处理 onmousemove

示例

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

当页面加载完成,我们使用变量 myPicscontext分别保存 ID 为myPics的 DOM 元素和接下来需要加工的的 2d 元素。

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

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

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

mouseup事件绘制图形的最后一段,并把xy设置为 0.通过设置 isDra

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

See also