jQueryで左クリックと右クリックを区別する

2024-04-02

jQueryで左右のクリックを区別する方法

イベントオブジェクトのプロパティを使用する

jQueryのイベントオブジェクトには、which プロパティと button プロパティがあり、これらのプロパティを使って左右クリックを区別できます。

$(document).on('click', function(e) {
  // 左クリックの場合
  if (e.which === 1 || e.button === 0) {
    console.log('左クリックされました');
  }

  // 右クリックの場合
  if (e.which === 3 || e.button === 2) {
    console.log('右クリックされました');
  }
});

jQuery 1.7以降では、イベントオブジェクトに buttons プロパティが追加されました。このプロパティは、押されているマウスボタンを表すビットマスクです。

$(document).on('click', function(e) {
  // 左クリックの場合
  if (e.buttons === 1) {
    console.log('左クリックされました');
  }

  // 右クリックの場合
  if (e.buttons === 2) {
    console.log('右クリックされました');
  }
});

jQueryのイベントオブジェクトには、originalEvent プロパティがあり、これは元のブラウザイベントオブジェクトへの参照です。このオブジェクトを使って、ブラウザ固有のプロパティにアクセスできます。

$(document).on('click', function(e) {
  // 左クリックの場合
  if (e.originalEvent.button === 0) {
    console.log('左クリックされました');
  }

  // 右クリックの場合
  if (e.originalEvent.button === 2) {
    console.log('右クリックされました');
  }
});

プラグインを使用する

jQueryには、左右クリックを区別するためのプラグインがいくつかあります。例えば、jquery-mousewheel プラグインは、マウスホイールのスクロールだけでなく、左右クリックも検出できます。

$(document).on('mousewheel', function(e) {
  // 左クリックの場合
  if (e.buttons === 1) {
    console.log('左クリックされました');
  }

  // 右クリックの場合
  if (e.buttons === 2) {
    console.log('右クリックされました');
  }
});

これらの方法のどれを使用しても、jQueryで左右クリックを区別することができます。どの方法を使うかは、あなたのプロジェクトの要件と好みに合わせてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>左右クリックを区別するサンプル</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>
    このエリアをクリックしてください。
  </p>

  <script>
  $(document).on('click', function(e) {
    // 左クリックの場合
    if (e.which === 1 || e.button === 0) {
      console.log('左クリックされました');
    }

    // 右クリックの場合
    if (e.which === 3 || e.button === 2) {
      console.log('右クリックされました');
    }
  });
  </script>
</body>
</html>

このコードをブラウザで実行すると、以下のようになります。

左クリックすると、「左クリックされました」というメッセージがコンソールに出力されます。

上記のコードは基本的な例です。実際のプロジェクトでは、以下の点に注意する必要があります。

左右クリックで実行する処理を別途記述する必要があります。
他のイベントと競合しないようにする必要があります。
モバイルデバイスでは、左右クリックの区別ができない場合があります。

これらの点を考慮して、適切なコードを記述してください。

左右クリックを区別する他の方法

event.type プロパティは、発生したイベントの種類を表します。左クリックの場合は click 、右クリックの場合は contextmenu という値になります。

$(document).on('click contextmenu', function(e) {
  // 左クリックの場合
  if (e.type === 'click') {
    console.log('左クリックされました');
  }

  // 右クリックの場合
  if (e.type === 'contextmenu') {
    console.log('右クリックされました');
  }
});

preventDefault() メソッドは、イベントのデフォルト動作をキャンセルします。右クリックの場合、デフォルト動作はコンテキストメニューの表示です。

$(document).on('contextmenu', function(e) {
  // 右クリックをキャンセル
  e.preventDefault();

  console.log('右クリックされました');
});

マウスボタンの画像を変更することで、ユーザーに左右クリックの違いをわかりやすく伝えることができます。

.left-click {
  cursor: url('left-click.png'), auto;
}

.right-click {
  cursor: url('right-click.png'), auto;
}

$(document).on('click', function(e) {
  // 左クリックの場合
  if (e.which === 1 || e.button === 0) {
    $(this).addClass('left-click');
  }

  // 右クリックの場合
  if (e.which === 3 || e.button === 2) {
    $(this).addClass('right-click');
  }
});