Element: mousemove イベント

mousemove イベントは、カーソルのホットスポットが要素内にあるときに、ポインティングデバイス (通常はマウス) が移動されると、その要素に発行されます。

バブリング あり
キャンセル 可
インターフェイス MouseEvent
イベントハンドラープロパティ onmousemove

例

次の例は、mousedown、mousemove、mouseup の各イベントを使って HTML5 の要素である 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

<h1>マウスイベントを使ったお絵かき</h1>
<canvas id="myPics" width="560" height="360"></canvas>

CSS

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

JavaScript

// 真のとき、マウスを動かすと線を描く
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 === true) {
    drawLine(context, x, y, e.offsetX, e.offsetY);
    x = e.offsetX;
    y = e.offsetY;
  }
});

window.addEventListener('mouseup', e => {
  if (isDrawing === true) {
    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

関連情報