jQueryで右クリックやダブルクリックを検知する方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryで右クリックやダブルクリックを検知する方法について、簡単に解説していきます。

右クリック

右クリックイベントの検知が容易にできます。

onメソッドを使い、第一引数にcontextmenu、第二引数に関数を指定します。

$(document).on("contextmenu", function (e) {
  console.log("右クリック");
});

上記のコードでは、ドキュメントの右クリック時にコンソールにログを出力します。

右クリック禁止

これを応用して右クリックの禁止もできます。

右クリックイベント時の関数でfalseを返すとメニューを表示させないようにできます。

$(document).on("contextmenu", function (e) {
  return false;
});

上記のコードでは、ドキュメントの右クリック時にメニューを表示させないようにします。

ダブルクリック

ダブルクリックイベントも検知可能です。

onメソッドを使用し、第一引数にdblclick、第二引数に関数を指定します。

$(document).on("dblclick", function (e) {
  console.log("ダブルクリック");
});

上記のコードの例では、ドキュメントのダブルクリック時にコンソールにログを出力します。