Element: mousemove event

mousemove イベントは、マウスなどのポインティングデバイスで、カーソルのホットスポットが要素内にある間に動いた時に発生するイベントです。

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

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

ページが読み込まれると、定数 myPicscontext が定義され、 canvas とその上に描画するために使用する 2d context が紐付けられます。そして定数 rect は canvas のページからの相対座標を保存しています。

mousedown イベントが発生すると線の描画が始まります。まずマウスの x 座標と y 座標が変数 xy に格納され、フラグ isDrawing の値が true になります。

ページ上でマウスを動かすと、 mousemove イベントが発生します。 isDrawing が true である場合、 drawLine 関数を呼び出して xy に格納された値から現在の位置まで線を引きます。 (なお、現在の xy の値は rect 定数を使用して、キャンバスの左上からの相対座標に補正されます。)

drawLine() 関数の返値は、座標を再調整して xy に保存します。

mouseup イベントで線の最後の区間を描画し、 xy をそれぞれを 0 に設定し、その後の描画を止めるために isDrawingfalse に設定します。

HTML

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

CSS

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

JavaScript

// isDrawing が真のとき、マウスを動かすと線を描く
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();
}

結果

仕様書

仕様書 状態
UI Events
mousemove の定義
草案
Document Object Model (DOM) Level 3 Events Specification
mousemove の定義
廃止された

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
mousemove eventChrome 完全対応 2Edge 完全対応 12Firefox 完全対応 6IE 完全対応 9Opera 完全対応 11.6Safari 完全対応 4WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 6Opera Android 完全対応 12.1Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報