JavaScriptで右クリックを禁止・禁止解除する

投稿日 2021/01/11

JavaScriptで右クリックを禁止する

ページ全体で右クリックを禁止するwindow.addEventListener('contextmenu', function(e) { e.preventDefault(); });
//window.oncontextmenu = function() { return false; };
特定の要素のみ右クリックを禁止するvar elements = document.getElementsByTagName('img');
for (var i=0; i<elements.length; i++) {
  elements[i].addEventListener('contextmenu', function(e) { e.preventDefault(); });
  //element.oncontextmenu = function() { return false; };
}
要素の右クリックを禁止する<img src="/images/sample.png" oncontextmenu="return false;">

コンテキストメニュー表示イベントをキャンセルすることでコンテキストメニューの表示を禁止します。

解除する

window.addEventListener('contextmenu', function(e) { e.stopImmediatePropagation(); }, true);

イベント伝搬を強制中断することでそれ以降のイベントリスナーの処理をなくすことで、上記の禁止処理に到達しなくなるため、右クリック禁止を解除できます。ただし、キャプチャフェースに右クリック禁止が設定された場合、先勝になります。

JavaScriptを無効化する

ブラウザ設定やブラウザ拡張機能(NoScript等)で対象ページのJavaScript実行を禁止することで上記の禁止処理を無効化します。

about:configを設定する (Firefox)

user.js// サイト側によるコンテキストメニュー表示設定 (default:true)
user_pref('dom.event.contextmenu.enabled', false);

CSSで右クリックを禁止する

CSSで右クリックの禁止するimg {
  pointer-events: none;
}

対象要素のポインターイベント(クリック、ドラッグ、ホバー等)を無効にします。
対象要素を右クリックした場合、コンテキストメニューは表示されます。ですが、画像用のコンテキストメニューは表示されなくなります。

解除する

CSSで右クリックの禁止を解除するimg {
  pointer-events: auto !important;
}

CSSの強制的な上書きで解除します。ただし、ページ側の設定に依存します。

拡張機能を利用する

Chrome/Edge/Firefoxには、複数の右クリック禁止を解除する拡張機能があります。拡張機能を利用して右クリック禁止を解除します。ただし、機能は拡張機能の実装に依存します。

その他

ドラッグを禁止する

ページ全体でドラッグを禁止するwindow.addEventListener('dragstart', function(e) { e.preventDefault(); });
//window.ondragstart = function() { return false; };
特定の要素のみドラッグを禁止するvar elements = document.getElementsByTagName('img');
for (var i=0; i<elements.length; i++) {
  elements[i].addEventListener('dragstart', function(e) { e.preventDefault(); });
  //element.ondragstart = function() { return false; };
}
要素のドラッグを禁止する<img src="/images/sample.png" ondragstart="return false;">

文字列選択を無効化する

JavaScriptで特定の要素のみ文字列選択を禁止するvar elements = document.querySelectorAll('.text');
for (var i=0; i<elements.length; i++) {
  elements[i].addEventListener('selectstart', function(e) { e.preventDefault(); });
}
CSSで特定の要素のみ文字列選択を禁止する.text {
  user-select: none;
}

コメント