JavaScriptで右クリックを無効・禁止にする方法

JavaScriptを使い、サイト上で右クリックを無効・禁止。
右クリックからの画像・動画のダウンロードを禁止にしたい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
実装サンプル
See the Pen
JavaScriptで右クリックを禁止 by Kohei (@kouk05)
on CodePen.0
codepenを使った実装サンプルです。
codepen上で右クリックをしても機能しません。
詳細は以下の通りです。
右クリックを無効・禁止にするイベント
document.addEventListener('contextmenu', () => {
event.preventDefault();
});
右クリックを無効・禁止にするJavaScriptコード例です。
まず、addEventListenerを定義。
引数にcontextmenuを選択してコンテキストメニューを開いたらという実行関数を記述します。
contextmenu(コンテキストメニュー)は右クリックしたら現れるメニューの事です。
addEventListenerの実行処理にevent.preventDefault();を記述。
event.preventDefault();を使う事で通常実行されるアクションを無効にできます。
以上で実装完了です。
まとめ
JavaScriptで右クリックを無効・禁止にする方法について紹介しました。
以上で解説を終わります。
目次