Written by Kasumi

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で右クリックを無効・禁止にする方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

スクロール中、要素をふわっと出す。scrollrevealjs の使い方について【簡単便利】

更新日:2022.09.09
293
JavaScript

disabledを使って任意のinput要素を入力無効にする方法【条件判定で解除する】

更新日:2022.09.09
1477
JavaScript

PACE.jsを使って簡単ローディング画面の作り方

更新日:2019.11.28
1034
JavaScript

Failed to execute ‘insertBefore’ on ‘Node’ The node before which the new node is to be inserted is not a child of this node.の原因・対処方法

2022.12.03
571