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

このプロパティは、1つまたは複数のボタンを押したり離したりすることによって発生したイベント中にどのボタンが押されたかを示すことのみを保証します。したがって、 mouseentermouseleavemouseovermouseout ,mousemove のようなイベントに対しては確かではありません。

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

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

構文

var buttonPressed = instanceOfMouseEvent.button

戻り値

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

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

上記のように、ボタンは標準の「左から右へ」のレイアウトとは異なるように構成されてもよいく、左利き用に設定されたマウスでは、ボタンの動作が逆になることがあります。いくつかのポインティングデバイスは1つのボタンしか持たず、キーボードまたは他の入力機構を使用して主、副、補助などを示します。他のポインティングデバイスは多くのボタンを異なる機能およびボタン値にマッピングすることができます。

 

HTML

<button id="button" oncontextmenu="event.preventDefault();">Click here with your mouse...</button>
<p id="log"></p>

JavaScript

let button = document.querySelector('#button');
let log = document.querySelector('#log');
button.addEventListener('mouseup', logMouseButton);

function logMouseButton(e) {
  if (typeof e === 'object') {
    switch (e.button) {
      case 0:
        log.textContent = 'Left button clicked.';
        break;
      case 1:
        log.textContent = 'Middle button clicked.';
        break;
      case 2:
        log.textContent = 'Right button clicked.';
        break;
      default:
        log.textContent = `Unknown button code: ${btnCode}`;
    }
  }
}

仕様

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.

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
buttonChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9
完全対応 9
完全対応 あり
補足
補足 Different convention used prior to version 9.
Opera 完全対応 ありSafari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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

このページの貢献者: isdh, mdnwebdocs-bot, TakashiHarano
最終更新者: isdh,