Element: mousedown イベント

mousedown イベントは、要素上でポインティングデバイスのボタンが押下されたときに Element に発生します。

メモ: click イベントとの違いは、 click イベントが完全なクリック操作の後、つまり、同じ要素内でマウスボタンを押して離した後で発生することです。 mousedown はボタンが最初に押された時点で発生します。

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

mousedown, mousemove, mouseup イベントを使用して、ユーザーがキャンバスにお絵かきができるようにする例です。

次の例は、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();
}

結果

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
mousedown eventChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報