MouseEvent.button

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

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

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

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

構文

var buttonPressed = instanceOfMouseEvent.button

戻り値

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

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

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

例

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.

ブラウザ実装状況

BCD tables only load in the browser