MouseEvent: button プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

MouseEvent.button は読み取り専用のプロパティで、イベントを引き起こすのにどのボタンが押されたのかを表します。

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

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

メモ: MouseEvent.buttons プロパティと混同しないように注意してください。こちらはすべての種類のマウスイベントで、ボタンの押下状態を示します。

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

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

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

HTML

html
<button id="button" oncontextmenu="event.preventDefault();">
  マウスでここをクリックしてください…
</button>
<p id="log"></p>

JavaScript

js
let button = document.querySelector("#button");
button.addEventListener("mouseup", (e) => {
  let log = document.querySelector("#log");
  switch (e.button) {
    case 0:
      log.textContent = "左ボタンがクリックされました。";
      break;
    case 1:
      log.textContent = "中央ボタンがクリックされました。";
      break;
    case 2:
      log.textContent = "右ボタンがクリックされました。";
      break;
    default:
      log.textContent = `不明なボタンコード: ${e.button}`;
  }
});

結果

仕様書

Specification
UI Events
# dom-mouseevent-button

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
button

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報