MouseEvent.button

この翻訳は不完全です。英語から この記事を翻訳 してください。

読み取り専用プロパティ MouseEvent.button はイベントのトリガーとなったのがどのボタンが押されたのかを表します。

このプロパティは押下から開放のイベントが発生したトリガーとなったボタンを保証するのみです。したがってそれ自体は、 mouseentermouseleavemouseovermouseout または mousemove のようなイベントでは保証されません。

ユーザーはポインティングデバイスの設定を変更できるため、例えばイベントのボタンプロパティがゼロだった場合、必ずしも物理的な左ボタンによるものとは限りません。ただし、そのような場合でも標準設定における左ボタンと同じ動作をするべきです。

Note: 全てのマウスイベントで扱える、複数のボタンを同時に押下されていることを表せる MouseEvent.buttons プロパティと混同しないように注意してください。

構文

var buttonPressed = instanceOfMouseEvent.button

戻り値

該当するボタンに対応する番号:

  • 0: メインボタンが押された。通常は左ボタンか未初期化状態。
  • 1: 補助ボタンが押された。通常はホイールボタンまたは中央のボタンが押された場合。
  • 2: 第二ボタンが押された。通常は右ボタン。
  • 3: 第四ボタン。一般的にブラウザーの戻るボタン。
  • 4: 第五ボタン。一般的にブラウザーの進むボタン。

マウスを左利き用に設定している場合、ボタン動作は反転します。この場合、値は右から左へ読み取られます。

<script>
var whichButton = function (e) {
    // 複数のイベントモデルに対応させる
    var e = e || window.event;
    var btnCode;

    if ('object' === typeof e) {
        btnCode = e.button;

        switch (btnCode) {
            case 0:
                console.log('左ボタンがクリックされた。');
            break;

            case 1:
                console.log('中央ボタンがクリックされた。');
            break;

            case 2:
                console.log('右ボタンがクリックされた。');
            break;

            default:
                console.log('想定外コード: ' + btnCode);
        }
    }
}
</script>

<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">マウスでクリック...</button>

仕様

Specification Status Comment
Document Object Model (DOM) Level 3 Events Specification
MouseEvent.button の定義
草案 Compared to Document Object Model (DOM) Level 2 Events Specification, the return value can be negative.
Document Object Model (DOM) Level 2 Events Specification
MouseEvent.button の定義
勧告 Initial definition.

ブラウザ実装状況

機能 Edge Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート (有) 1.0 (1.7 or earlier) 1.0 9.0 [1] (有) 3.0.4
Feature Edge Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
基本サポート (有) ? ? ? ? ?

[1] This convention is not followed in Internet Explorer prior to version 9: see QuirksMode for details.

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: TakashiHarano
 最終更新者: TakashiHarano,