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

「画像やテキストをコピーされたくない」といった理由で、右クリックを禁止したいという要望はよくあります。JavaScriptでは contextmenu イベントを止めるだけで簡単に実装できます。

ただし先に結論を言うと、右クリック禁止はコンテンツ保護にはなりません。簡単に回避できるうえ、ユーザーの利便性を大きく損ないます。この記事では実装方法に加えて、その限界と正しい使いどころを正直に解説します。

右クリックを無効化するコード

右クリックすると出る標準メニュー（コンテキストメニュー）は、contextmenu イベントをpreventDefault() で止めると表示されなくなります。

document.addEventListener("contextmenu", (event) => {
  event.preventDefault();
});

ページ全体ではなく、特定の要素だけ無効化したい場合は、その要素にイベントを設定します。影響範囲を絞れるぶん、こちらの方が無難です。

const target = document.getElementById("protected");

target.addEventListener("contextmenu", (event) => {
  event.preventDefault();
});

でも「コンテンツ保護」にはならない

右クリック禁止を「コピー防止」「セキュリティ対策」として導入するのはおすすめしません。次のようにいくらでも回避できるからです。

• キーボードショートカット（Ctrl+C / Ctrl+U でソース表示）
• ブラウザの開発者ツール（要素やソースをそのまま閲覧・取得）
• JavaScriptをオフにする、または拡張機能で無効化する
• スクリーンショットを撮る

正当な使いどころ：独自の右クリックメニュー

contextmenu を止める数少ない正当な理由は、標準メニューの代わりに独自のメニューを表示したいときです。ファイル管理アプリやエディタのように、右クリックで専用の操作メニューを出す場合に使います。

<ul id="myMenu" style="display:none; position:absolute;">
  <li>コピー</li>
  <li>共有</li>
</ul>

const menu = document.getElementById("myMenu");

document.addEventListener("contextmenu", (event) => {
  event.preventDefault();                 // 標準メニューを抑制
  menu.style.top = `${event.pageY}px`;    // クリック位置に
  menu.style.left = `${event.pageX}px`;
  menu.style.display = "block";           // 独自メニューを表示
});

// 別の場所をクリックしたら閉じる
document.addEventListener("click", () => {
  menu.style.display = "none";
});

このように代わりの操作手段を用意するのであれば、ユーザーの利便性を損なわずに右クリックを活用できます。クリック操作の制御全般はクリックを禁止・無効化する完全ガイド、キー操作の無効化はEnterキーでフォーム送信を無効化する方法も参考になります。

本当にコンテンツを守りたいなら

画像や文章を守ることが目的なら、右クリック禁止ではなく次のような対策を組み合わせます。いずれも「完全には守れない」前提で、コストを上げて流用を抑えるのが基本的な考え方です。

• 透かし（ウォーターマーク）：画像に著作権表示やロゴを入れる
• サーバー側のアクセス制御：ログインや署名付きURLで配信を制限する
• 閲覧ログの記録：誰がいつアクセスしたかを残し、抑止力にする
• 解像度を下げた公開：高解像度版は購入者のみに渡す

JavaScriptやCSSによる制限は「軽い抑止」以上にはならないと割り切り、重要なコンテンツはサーバー側で守るのが鉄則です。

よくある質問（FAQ）

まとめ

右クリックの禁止は contextmenu イベントを preventDefault() するだけで実装できます。ただしコンテンツ保護にはならず（簡単に回避できる）、UXを損なうため、安易な全面禁止は避けましょう。

正当な使いどころは「独自の右クリックメニューを出す」など、代わりの操作を用意する場面に限られます。コンテンツを守りたいなら、右クリック禁止ではなく透かしやサーバー側のアクセス制御を組み合わせるのが現実的です。