押下されたマウスボタンを取得する - JavaScript

JavaScriptで押下されたマウスボタンを取得するコードを紹介します。

概要

こちらの記事では、マウスボタンの押下の検出とその座標を取得するコードを紹介しました。この記事ではマウスボタンのどのボタンが押されたかを判別するコードを紹介します。
マウスで押し下げれれたボタンの種類を判別するには、イベントハンドラの引数のbuttonプロパティ、または、buttonsプロパティを利用します。

プログラム1:押下されたボタンを検出する

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />

  <script type="text/javascript">
    function init()
    {
      window.onmousedown = handleMouseDown;
    }

    function handleMouseDown(event) {
      event = event || window.event; // IE対応
      target = document.getElementById("output");
      if (event.button == 0) {
        target.innerHTML = "左ボタンが押されました。";
      }
      else if (event.button == 1) {
        target.innerHTML = "中ボタンが押されました。";
      }
      else if (event.button == 2) {
        target.innerHTML = "右ボタンが押されました。";
      }
    }
  </script>

</head>
<body onload="init();">
  <div id="output" ></div>

</body>
</html>

解説

bodyタグのonload属性に"init();"の記述により、ページ表示時にinit()関数を呼び出します。

function init()
{
  window.onmousedown = handleMouseDown;
}

init関数では、onmousedown イベントにhandleMouseDown()関数を、イベントハンドラとして設定します。

    function handleMouseDown(event) {
      event = event || window.event; // IE対応
      target = document.getElementById("output");
      if (event.button == 0) {
        target.innerHTML = "左ボタンが押されました。";
      }
      else if (event.button == 1) {
        target.innerHTML = "中ボタンが押されました。";
      }
      else if (event.button == 2) {
        target.innerHTML = "右ボタンが押されました。";
      }
    }

MouseDownイベントハンドラでは、イベントハンドラの引数のbuttonプロパティの値を確認し、メッセージを表示します。ボタンと値の対応は以下となります。

buttonプロパティの値とマウスボタンとの対応表
button値	ボタンの種類
0	左ボタン
1	中ボタン
2	右ボタン

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

Webブラウザのウィンドウ内でマウスボタンをクリックします。クリックしたボタンを表すメッセージが画面に表示されます。

別のボタンをクリックすると、メッセージも変わります。

プログラム2 : 複数のボタンの同時押しを検出する

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <meta charset="utf-8" />

  <script type="text/javascript">
    function init()
    {
      window.onmousedown = handleMouseDown;
    }

    function handleMouseDown(event) {
      event = event || window.event; // IE対応
      target = document.getElementById("output");
      target.innerHTML = "";
      if ((event.buttons & 1) == 1) {
        target.innerHTML += "左ボタンが押されました。";
      }
      if ((event.buttons & 4) == 4) {
        target.innerHTML += "中ボタンが押されました。";
      }
      if ((event.buttons & 2) == 2) {
        target.innerHTML += "右ボタンが押されました。";
      }
    }
  </script>

</head>
<body onload="init();">
  <div id="output" ></div>

</body>
</html>

解説

bodyタグのonload属性に"init();"の記述により、ページ表示時にinit()関数を呼び出します。

init関数では、onmousedown イベントにhandleMouseDown()関数を、イベントハンドラとして設定します。この部分は先のコードと同様の処理です。

function handleMouseDown(event) {
  event = event || window.event; // IE対応
  target = document.getElementById("output");
  target.innerHTML = "";
  if ((event.buttons & 1) == 1) {
    target.innerHTML += "左ボタンが押されました。";
  }
  if ((event.buttons & 4) == 4) {
    target.innerHTML += "中ボタンが押されました。";
  }
  if ((event.buttons & 2) == 2) {
    target.innerHTML += "右ボタンが押されました。";
  }
}

MouseDownイベントハンドラでは、イベントハンドラの引数のbuttonsプロパティの値を確認し、メッセージを表示します。buttonsの値は押されたボタンの論理和(OR)の値が送られます。ボタンの押下を検出するには、buttons値とボタンの値とでANDをとります。
ボタンと値の対応は以下となります。