Element：mousemove 事件
====================

`mousemove` 事件在定点设备（通常指鼠标）的光标在元素内移动时，会在该元素上触发。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或者设置事件处理器属性。


```js
addEventListener("mousemove", (event) => {});

onmousemove = (event) => {};
```

事件类型
----

一个 `MouseEvent`。继承自 `Event`。

Event

UIEvent

MouseEvent事件属性
----

*这个接口也继承其父接口 `UIEvent` 和 `Event` 的属性。*

`MouseEvent.altKey` 只读 

当鼠标事件被触发时，如果 `alt` 键已被按下，返回 `true`。

`MouseEvent.button` 只读 

触发鼠标事件时，按下按钮的编号（如果适用）。

`MouseEvent.buttons` 只读 

触发鼠标事件时，按下的按钮（如果存在）。

`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.relatedTarget` 只读 

事件的次要目标（如果存在）。

`MouseEvent.screenX` 只读 

鼠标指针相对于屏幕的 X 轴坐标。

`MouseEvent.screenY` 只读 

鼠标指针相对于屏幕的 Y 轴坐标。

`MouseEvent.shiftKey` 只读 

当鼠标事件被触发时，如果 `shift` 键已被按下，返回 `true`。

`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


```html
<h1>使用鼠标事件绘制</h1>
<canvas id="myPics" width="560" height="360"></canvas>
```

### CSS


```css
canvas {
  border: 1px solid black;
  width: 560px;
  height: 360px;
}
```

### JavaScript


```js
// 如果为 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 with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 事件介绍
* `mousedown`
* `mouseup`
* `click`
* `dblclick`
* `mouseover`
* `mouseout`
* `mouseenter`
* `mouseleave`
* `contextmenu`