マウスイベント (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 … Main button (普通は、左ボタン) または初期化されていない
  • 1 … Auxiliary button (普通は、中ボタン)
  • 2 … Secondary button (普通は、右ボタン)
  • 3 … 第4ボタン (主に、戻るボタン)
  • 4 … 第5ボタン (主に、進むボタン)
buttons ※1 The buttons being pressed when the mouse event was fired
  • 0 … 押されていない、または初期化されていない
  • 1 … Primary button (普通は、左ボタン)
  • 2 … Secondary button (普通は、右ボタン)
  • 4 … Auxilary button (普通は、中ボタン)
  • 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要素のようにEnterやSpaceの押下に反応する要素では、キー入力でもこのイベントが発生します。なお主ボタン以外はこのイベントではなく、contextmenuやmouseupで捕捉できます。

下の要素をマウスまたはキーボードから操作すると、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

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

参考

MouseWheelEvent

DragEvent

参考

参考

関連ページ

JavaScriptのドキュメントから検索