Element: mouseup イベント

mouseup イベントは、 Element においてポインターが中にあるときにポインティングデバイス (マウスやトラックパッドなど) のボタンが話されたときに発生します。 mouseup イベントは mousedown イベントに対応します。

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

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

ページが読み込まれると、定数 myPicscontext が、それぞれ canvas と描画に使用する 2d context の参照を格納するために生成されます。

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

ページ上でマウスを動かすと、 mousemove イベントが発行されます。 isDrawing が true である場合、 drawLine 関数を呼び出して xy に格納された値から現在の位置まで線を引きます。

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
mouseup の定義
草案
Document Object Model (DOM) Level 3 Events Specification
mouseup の定義
廃止された

ブラウザーの互換性

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

凡例

完全対応  
完全対応

関連情報