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

更新日: 公開日:2016/01/27
jQueryで右クリックを禁止にする

Web ページで右クリックのコンテキストメニューを表示させたくない理由は様々です。

  • 戻る、進むを禁止する
  • 再読み込みを禁止する
  • 画像の保存を禁止する
  • ソースコードの表示を禁止する
  • 印刷を禁止する

ただ、ブラウザ上にメニューがあったり、ブラウザの仕様でショートカットキーが割り当てられたりしているので、一概に右クリックを禁止しただけでは制御することはできません。

会社で利用される社内システムのように、予めポップアップ画面上で動かす前提で作られているものであれば、一部のショートカットキーの入力と右クリックのイベントを制御することで、目的が達成できることがあります。

利用する状況はさておき、右クリックの禁止は利用者の利便性を損なうため、明確な理由がない限り導入するのはおすすめしません。どうしても必要な場合に限り、制限を掛けるようにしてください。

では、jQuery で右クリックを制御する方法を説明していきましょう。

jQuery で右クリックを禁止する方法

jQuery では、右クリックによるコンテキストメニューの表示をイベントとしてキャッチすることができます。よって、そのイベントに対しキャンセルするように処理を組み込めば、右クリックを禁止できるようになります。

画面内全体で右クリック禁止にする方法

jQuery で右クリック禁止を実装【JavaScript】
$(function(){
  // 画面全体で右クリックを禁止にする
  $(document).on("contextmenu",function(){
    return false;
  });
});

contextmenu のイベントをキャッチして false を返却すれば、発生したイベントがキャンセルされます。これはイベントハンドラの基本的な仕様になります。

実際に右クリックが表示できない状況をサンプルで紹介したいところですが、右クリックが使えないと不便なので、こちらはプログラムの紹介のみとさせていただきます。

特定の要素に対し右クリックを禁止にする方法

jQuery で右クリック禁止を実装【JavaScript】
$(function(){
  // 画像ファイル上での右クリックを禁止にする
  $("img").on("contextmenu",function(){
    return false;
  });
});

例として、画像ファイルである img タグに対し右クリックを無効化にする方法を挙げています。Web サイトによっては、画像を保存させないようにこのような仕組みを取り入れていることがあります。

画像以外でも任意の要素に対して制御したいのであれば、上記プログラム3行目の img の部分をクラス名や id に変更すれば対応できます。

以上、jQuery で右クリックを禁止にする方法でした。

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。