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

Webサイトの画像や文章を無断コピーされたくない――そんなときに使われるのが「右クリック禁止」です。jQueryでは数行のコードで実装できますが、どこまで有効で、どこから無意味になるかを理解した上で使うことが大切です。

この記事では、ページ全体への適用・特定要素のみの制限・カスタムコンテキストメニューの実装まで、実用レベルのコードと共に解説します。

ページ全体の右クリックを禁止する

最もシンプルな実装です。contextmenu イベントで e.preventDefault() を呼ぶだけです。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>

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

return false は e.preventDefault() と e.stopPropagation() を両方呼ぶ短縮形です。どちらでも動作は同じです。

特定の要素だけ右クリックを禁止する

ページ全体を禁止するとユーザーの利便性を大きく損ねます。画像や特定のコンテナに限定するのがより現実的な対応です。

画像のみ禁止

$(function () {
  // すべての img 要素の右クリックを禁止
  $("img").on("contextmenu", function (e) {
    e.preventDefault();
  });
});

特定クラスを持つ要素のみ禁止

$(function () {
  // .no-rightclick クラスが付いた要素のみ禁止
  $(".no-rightclick").on("contextmenu", function (e) {
    e.preventDefault();
  });
});

<!-- 右クリックを禁止したい要素に no-rightclick クラスを付ける -->
<img src="photo.jpg" alt="サンプル画像" class="no-rightclick">
<div class="no-rightclick">
  <p>このコンテンツはコピー禁止エリアです</p>
</div>

動的に追加された要素にも対応する（イベント委譲）

JavaScript で後から追加した要素には通常のon()が効きません。イベント委譲を使うと動的要素にも対応できます。

$(function () {
  // document（または親コンテナ）に委譲して動的要素にも対応
  $(document).on("contextmenu", ".no-rightclick", function (e) {
    e.preventDefault();
  });
});

テキスト選択を禁止する

右クリック禁止だけではテキストのドラッグ選択→コピーは防げません。テキスト選択も制限する場合はCSSと組み合わせます。

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

jQueryでも同等のことができます。

$(function () {
  $(".no-select")
    .on("selectstart", function (e) { e.preventDefault(); })  // IE対応
    .css({
      "-webkit-user-select": "none",
      "-moz-user-select":    "none",
      "user-select":         "none"
    });
});

カスタムコンテキストメニューに差し替える

標準メニューを完全に禁止するのではなく、独自メニューに差し替えるのがUX的に優れた方法です。「保存禁止」と「シェアする」など独自の選択肢を提供できます。

HTML

<!-- カスタムメニュー -->
<ul id="customMenu">
  <li id="menu-info">ℹ️ 画像情報</li>
  <li id="menu-share">? URLをコピー</li>
</ul>

<img src="photo.jpg" alt="サンプル" id="targetImage">

CSS

#customMenu {
  display: none;
  position: fixed;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: .4rem 0;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  z-index: 9999;
  list-style: none;
  margin: 0;
}
#customMenu li {
  padding: .5rem 1rem;
  cursor: pointer;
  font-size: .9rem;
}
#customMenu li:hover {
  background: #f0f7ff;
}

JavaScript

$(function () {
  const $menu = $("#customMenu");

  // 右クリックでカスタムメニューを表示
  $("#targetImage").on("contextmenu", function (e) {
    e.preventDefault();
    $menu.css({ top: e.clientY, left: e.clientX }).show();
  });

  // 他の場所をクリックしたらメニューを閉じる
  $(document).on("click", function () {
    $menu.hide();
  });

  // Escキーでも閉じる
  $(document).on("keydown", function (e) {
    if (e.key === "Escape") $menu.hide();
  });

  // メニュー項目の処理
  $("#menu-info").on("click", function () {
    alert("画像サイズ: 1200x800px");
  });
  $("#menu-share").on("click", function () {
    navigator.clipboard.writeText(location.href).then(function () {
      alert("URLをコピーしました");
    });
  });
});

スマートフォン（iOS）の長押しメニューを無効化する

iOSのSafariでは画像を長押しすると「写真に追加」などのメニューが表示されます。これをCSSで無効化できます。

/* iOS の長押しメニュー（callout）を無効化 */
img.no-save {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  pointer-events: none;  /* ドラッグ保存も防ぐ */
}

pointer-events: none を設定すると画像へのクリックやドラッグも無効になります。リンクを画像に重ねている場合など、クリックが必要なケースでは外してください。

ドラッグによる画像保存を禁止する

画像をデスクトップにドラッグ＆ドロップすると保存できてしまいます。dragstart イベントで防ぎましょう。

$(function () {
  // 画像のドラッグ保存を禁止
  $("img.no-save").on("dragstart", function (e) {
    e.preventDefault();
  });
});

CSSと組み合わせた完全版：

$(function () {
  const $protectedImgs = $("img.no-save");

  // 右クリック禁止
  $protectedImgs.on("contextmenu", function (e) { e.preventDefault(); });
  // ドラッグ禁止
  $protectedImgs.on("dragstart",   function (e) { e.preventDefault(); });
  // 長押し対策（touchstart で選択を抑制）
  $protectedImgs.on("touchstart",  function (e) { e.preventDefault(); });
});

キーボードショートカットも無効化する

右クリック禁止だけでは、Ctrl+U（ソース表示）や F12（DevTools）などで内容を確認できます。これらも合わせて無効化したい場合のコードです。

$(function () {
  $(document).on("keydown", function (e) {
    // F12（DevTools）
    if (e.key === "F12") {
      e.preventDefault();
      return false;
    }
    // Ctrl+U（ソース表示）
    if (e.ctrlKey && e.key === "u") {
      e.preventDefault();
      return false;
    }
    // Ctrl+Shift+I（DevTools）
    if (e.ctrlKey && e.shiftKey && e.key === "I") {
      e.preventDefault();
      return false;
    }
    // Ctrl+S（保存）
    if (e.ctrlKey && e.key === "s") {
      e.preventDefault();
      return false;
    }
  });
});

右クリック禁止の限界と正しい理解

右クリック禁止は「コンテンツ保護」として広く使われていますが、実際には以下の方法で簡単に回避できます。

よくある質問（FAQ）

あわせて読みたい

• 【JavaScript】右クリックを禁止する方法
• JavaScriptでイベントを無効化する方法
• jQueryを用いたシンプルなクリップボードコピー実装ガイド

まとめ

「コンテンツを守りたい」という目的は理解できますが、UXへの影響を考えると必要最小限の範囲での適用が現実的です。カスタムメニューの実装など、ユーザーへの付加価値と組み合わせた使い方を検討してみてください。