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

Web サイトを構築していると、コンテキストメニューを表示させたくない場面がいくつが出てきます。例えば以下のようなケースが挙げられるでしょう。

  • 戻る、進むを利用させたくない
  • 再読み込みをさせたくない
  • 画像を保存させたくない
  • ソースコードを表示させたくない
  • 印刷させたくない

ブラウザ上にもメニューがあるので、一概に右クリックで表示されるコンテキストメニューだけで制限を掛けるのは解消しない問題が大半です。完全に動きを制御するのであれば、マウスの右クリックのイベントをキャンセルするだけでなく、それ以外にも目的に応じた処置を施してあげなくてはいけません。

社内システムのように、予めポップアップ画面上で動ことを前提に組み込まれた Web アプリでは、右クリックを制限するだけで事足りるケースもあります。今回はまず基本となる右クリックのイベントを禁止する方法について触れていきます。

jQuery で右クリックイベントを禁止する方法

jQuery で右クリックのイベントを判定するには on イベントを用いて判断します。イベントの名称は contextmenu です。ここまで分かれば、あとは対象の要素を指定して組み込むだけです。

画面内全ての要素に対して右クリック禁止にする方法

単純にコンテキストメニューのイベントを判定して、false を返却することでイベントを無効化するようにしています。とても簡単な仕組みで、処理は単純そのものです。

いつもならサンプルを用意するのですが、右クリックが使えなくなると非常に不便なので、こちらのサンプルは割愛させていただきます。

画像ファイルに対し右クリックを禁止にする方法

こちらは特定の要素に対するイベントをキャンセルする方法です。例として、画像ファイルである img タグに対し、右クリックイベントをキャンセルする方法を挙げています。

サンプルとして、このページ内に同処理を仕掛けているので、トップのロゴイメージやプロフィール画像等で試してみてください。なお画像以外の場所では右クリックが出来るようになっています。

特定のクラスや ID 等を対象に禁止にするのであれば、上記処理三行目の img タグの部分をクラス名ID 名に変更すれば、任意に設定した特定の要素に対して制御が掛かるようになります。

PAGE TOP ↑