マウスイベント (MouseEvent)

イベント 発生タイミング バブリング キャンセル
click クリックされたとき
dblclick ダブルクリックされたとき  
contextmenu 右クリックされたとき
mousedown マウスボタンが押されたとき
mouseup マウスボタンが離されたとき
mouseover マウスポインタが要素に乗ったとき
mouseenter マウスポインタが要素に乗ったとき × ×
mouseout マウスポインタが要素から離れたとき
mouseleave マウスポインタが要素から離れたとき × ×
mousemove マウスポインタが要素の上を移動したとき
wheel (mousewheel) ホイールボタンが回されたとき

イベントの発生タイミング

下のボックスでクリックなどをすることで、イベントの発生タイミングを確認できます。ただし発生回数が多すぎるため、mousemoveは除外しています。

左クリック以外は、ブラウザによってイベントの有無が異なります。右クリック、中クリックイベントがブラウザによって拾えないことがある【JavaScript】 - Programming Magic

MouseEvent

プロパティ

プロパティ 説明
altKey true if the alt key was down when the mouse event was fired.
ctrlKey true if the control key was down when the mouse event was fired.
shiftKey true if the shift key was down when the mouse event was fired.
metaKey true if the meta key was down when the mouse event was fired.
relatedTarget The secondary target for the event, if there is one.
button ※1 The button number that was pressed when the mouse event was fired.
  • 0 … 左ボタン
  • 1 … 中ボタン
  • 2 … 右ボタン
buttons ※1 The buttons being pressed when the mouse event was fired
  • 1 … 左ボタン
  • 2 … 右ボタン
  • 4 … 中ボタン
  • 8 … 第4ボタン (戻るボタン)
  • 16 … 第5ボタン (進むボタン)
clientX The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY The Y coordinate of the mouse pointer in local (DOM content) coordinates.
screenX The X coordinate of the mouse pointer in global (screen) coordinates.
screenY The Y coordinate of the mouse pointer in global (screen) coordinates.
movementX The X coordinate of the mouse pointer relative to the position of the last mousemove event.
movementY The Y coordinate of the mouse pointer relative to the position of the last mousemove event.

※1 buttonsはbuttonと比較して、

  • 複数ボタンの同時押しに対応する
  • Windowsならば、マウスの第4と第5ボタンもサポートする
  • Mac OS Xでサポートされない

などの点で異なります。MouseEvent.buttons - Web API Interfaces | MDN

下のボックスをクリックすると、各イベントでのbuttonとbuttonsの値を確認できます。またボックスからマウスポインタを外すと、結果がクリアされます。

Click Me!
  mousedown mouseup click contextmenu
button        
buttons        

clickイベント

clickイベントはポインティング デバイスのボタンが押され、そして離されたときに発生します。このようにこのイベントはマウスによるクリックを想定したものですが、a要素button要素のようにEnterSpaceの押下に反応する要素では、キー入力でもこのイベントが発生します。

下の要素をマウスまたはキーボードから操作すると、clickイベントを捕捉したときにその要素名を表示します。

  • <a>
  • <div>
  • (無効状態)

このclickイベントは、HTMLElement.click()によってスクリプトから発生することもできます。

WheelEvent

プロパティ

プロパティ 説明
deltaX 水平方向のスクロール量
deltaY 垂直方向のスクロール量
deltaZ Z軸方向のスクロール量
deltaMode スクロール量の単位
  • DOM_DELTA_PIXEL (0x00) … ピクセル数
  • DOM_DELTA_LINE (0x01) … 行数
  • DOM_DELTA_PAGE (0x02) … ページ数

下のボックス内でマウスホイールを動かすと、そのイベントの値を確認できます。

  総和
deltaX    
deltaY    
deltaZ    
deltaMode   ---

iframeに対するホイールイベントの捕捉

var iframe  =  document.createElement( 'iframe' );

// iframeの読み込みを待つ
iframe.onload = function(e)
{
    // iframeのHTMLドキュメントに対してハンドラを登録する
    iframe.contentDocument.onwheel = function(e)
    {
        console.log(e);
        return false;
    }
}

document.body.appendChild(iframe);
Retrigger mousewheel events from iframe - Stack Overflow

下のボックス内でマウスホイールを動かすと、イベントの捕捉状況を確認できます。

DragEvent