Element: mousemove イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

MouseEvent.layerY 読取専用

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

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

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

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

関連情報