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

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;
}