addEventListener("mousemove", (event) => {});
onmousemove = (event) => {};
一个 MouseEvent。继承自 Event。
Event
生成事件的设备类型（MOZ_SOURCE_* 常量之一）。例如，这允许你决定鼠标事件是否由实际的鼠标还是触摸事件生成（这可能会在一定程度影响你对事件相关坐标判断的准确性）。
MouseEvent.webkitForce
单击时施加的压力大小。
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 以停止绘制。
<h1>使用鼠标事件绘制</h1>
<canvas id="myPics" width="560" height="360"></canvas>
canvas {
border: 1px solid black;
width: 560px;
height: 360px;
// 如果为 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
Learn how to contribute
This page was last modified on by MDN contributors.
View this page on GitHub • Report a problem with this content
