jQuery のクリックイベントで右クリックを除外する方法

jQuery のクリックイベントで右クリックを除外する方法を紹介します。
クリックのタイミングでログ計測をしている時、右クリックを除外したい場合に便利な方法です。

1. 右クリックを除外する方法

右クリックを除外する方法

jQuery のクリックイベントで右クリックを除外したい時に次のコードを追加します。
※jQueryのライブラリーは別途読み込んでください。

$('.btn-play').on('click', function (event) {

  // 右クリックの場合は処理を中止

  if (event.button === 2) {

    return;

  }

  // 通常のクリックの場合、'active' クラスを追加

  $(this).addClass("active");

});

// 右クリック（contextmenu）イベントを除外する

$('.btn-play').on('contextmenu', function (event) {

  event.preventDefault();

});

イベント発生時に event.button で右クリックを判別して処理を中止します。
左クリックの場合は処理が実行されクラスが付与されます。

また、contextmenu（コンテキストメニュー）表示を防ぐために event.preventDefault() を追加しています。

まとめ

jQuery のクリックイベントで右クリックを除外する方法を紹介しました。