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

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

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

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

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

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

jQueryキーボード入力の制御
jQuery でファンクションキーやバックスペースキーを無効化する制御
まず JavaScript の処理としてキー入力イベントは keydown から取得します。入力したキーによって、コード値を取得することができます。そして処理を無効化...

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

では、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 で右クリックを禁止にする方法でした。

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

元システムエンジニアから、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。

更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。