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` 読取専用 

ビューポート座標におけるマウスポインターの X 座標です。

`MouseEvent.clientY` 読取専用 

ビューポート座標におけるマウスポインターの Y 座標です。

`MouseEvent.ctrlKey` 読取専用 

このマウスイベントが発行されたときに `control` キーが押されていた場合は `true` を返します。

`MouseEvent.layerX` 
Non-standard
 読取専用 

このイベントの現在のレイヤーにおける相対の水平座標を返します。

`MouseEvent.layerY` 
Non-standard
 読取専用 

このイベントの現在のレイヤーにおける相対の垂直座標を返します。

`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` 
Non-standard
 読取専用 

 イベントを発生させた機器の種類（`MOZ_SOURCE_*` 定数のいずれか）。
 これにより、例えばマウスイベントが実際のマウスによって生成されたのか、タッチイベントによって生成されたのかを判断することができます（これはイベントに関連付けられた座標を解釈する精度に影響するかもしれません）。


`MouseEvent.webkitForce` 
Non-standard
 読取専用 

クリックしたときに適用された圧力です。

`MouseEvent.x` 読取専用 

`MouseEvent.clientX` の別名です。

`MouseEvent.y` 読取専用 

`MouseEvent.clientY` の別名です。

例
-

次の例は、`mousedown`、`mousemove`、`mouseup` の各イベントを使って HTML の要素である canvas の上にお絵かきができるものです。機能は単純で、線の太さは 1、線の色は黒に固定されています。

ページが読み込まれると、定数 `myPics` と `context` が、それぞれ 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
// 真のとき、マウスを動かすと線を描く
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`