MouseEvent.button

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

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

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

var buttonPressed = instanceOfMouseEvent.button

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

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

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

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

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}`;
    }
  }
}

• "MouseEvent"