mousemove - Web API 接口参考 编辑

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

基本信息

例子

下面的例子将使用 mousedown, mousemove, and 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();
}

结果

参考

浏览器兼容性

BCD tables only load in the browser

See also

• Introduction to events
• mousedown
• mouseup
• click
• dblclick
• mouseover
• mouseout
• mouseenter
• mouseleave
• contextmenu