Element: mousemove event

This translation is incomplete. この記事の翻訳にご協力ください

mousemove イベントは、ある要素の上でマウスなどのポインティングデバイスが動いた時に発動するイベントです。

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

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

ページが読み込まれると、定数 myPicscontext が定義され、canvas とその上にドローイングしていく 2d context が紐付けられます。そして定数 rect はページに対する canvas の座標を保存しています。

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

ページの上でマウスを動かすと、mousemove イベントが発火します。このときフラグ isDrawing が true の場合、mousemove のイベントハンドラーは drawLine 関数を呼び出し、座標 (x, y) からマウスの現在地まで線を引っ張ります。(Remember, the current x and y values are modified using the rect constant to adjust the coordinates so they are relative to the upper-left of the canvas.)

When the drawLine() function returns, we adjust the coordinates and then save them in x and y.

マウスを放すと mouseup イベントハンドラーが実行し書いていた線を書き切ります。そして変数 xy をそれぞれを 0 に設定し、mousemove イベントが発生してもこれ以上描画を続けないようにフラグ isDrawing の値を false に変えます。

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');

// The x and y offset of the canvas from the edge of the page
const rect = myPics.getBoundingClientRect();


// mousedown、mousemove、mouseup のそれぞれに対してイベントリスナーを設定する
myPics.addEventListener('mousedown', e => {
  x = e.clientX - rect.left;
  y = e.clientY - rect.top;
  isDrawing = true;
});

myPics.addEventListener('mousemove', e => {
  if (isDrawing === true) {
    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
    x = e.clientX - rect.left;
    y = e.clientY - rect.top;
  }
});

window.addEventListener('mouseup', e => {
  if (isDrawing === true) {
    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
    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 Status
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

凡例

完全対応  
完全対応

関連情報