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

2016/01/27

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

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

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

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

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 ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプで名前を変える方法は?性別は変更できない?

どうぶつの森ポケットキャンプのゴロゴロ鉱山ってどんなところ?ベルはどれくらい手に入る?

どうぶつの森ポケットキャンプのデータ移行方法!スマホを機種変更する場合はどうすれば良い?

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ