#055
posted on 2021.10.15

サイト上で右クリックを禁止にする方法と禁止を解除する方法。

ユーザーの利便性を損なう以外に意味が無いと思う右クリック禁止を撲滅したいので、サイト上で右クリックや要素の範囲選択を禁止にする方法と禁止にされている場合に一括解除する方法のメモ。

 

 

右クリックや範囲選択を禁止にする方法

サイト上で右クリックや範囲選択を禁止にするには、以下の対処を行う。

  1. JavaScriptで、「右クリック」、「コピー」、「範囲選択」のイベントの挙動を制御。
  2. CSSで、要素の「範囲選択」や「ドラッグ」を不可に設定。

この対処をしても、ブラウザのデベロッパーツールでソースを表示閲覧したり、ページをダウンロード保存したりできるので、コピー対策としての意味は無い。

 

1. JavaScriptで制御して禁止にする方法

JavaScriptで、所定のイベント発火時にデフォルトの動作をしないように制御する。

  • 「contextmenu」イベント : 「コンテキストメニューの呼び出し」(マウスの右クリックやキーボードのショートカットなど)のときに発火するイベント。
  • 「copy」イベント : ユーザーが「テキストをコピー」しようとしたときに発火するイベント。
  • 「selectstart」イベント : ユーザーが新しい「選択範囲を指定」した際に発火するイベント。(iOS版Safariは非対応なのでCSSで対処。)
  • 「mousedown」イベント : ユーザーが「ポインティングデバイスのボタン」(マウスの左クリックなど)を押したときに発火するイベント。

※ 「click」イベントは「mousedown」イベントと違い、ボタンを押したあと離されたときに発火する。

※ グローバルイベントハンドラーが持つプロパティー「oncontextmenu」、「onmousedown」、 HTMLElementが持つプロパティー「oncopy」、「onselectstart」からでも上記のイベントを制御できる。

GlobalEventHandlersミックスインは、HTMLElementやDocument、Windowといったインターフェイスに共通のイベントハンドラー。(MDN Web Docs)

 

「contextmenu」イベントのデフォルト動作を抑止

マウスの右クリックやキーボードのショートカットなどで「コンテキストメニューの表示」がされないように制御する方法。

  1. window(または任意のHTML要素)に「contextmenu」イベント発火時の挙動をリスナー登録。
  2. eventオブジェクトが持つ「preventDefault()メソッド」でデフォルトの動作をキャンセル。(ここでは「コンテキストメニューの呼び出し」がキャンセルされる。)

※ 特定のHTMLの要素の上でだけで制御したい場合は、getElementsByTagName()メソッドなどで任意の要素を取得し、その要素でイベントリスナーを設定する。

※ グローバルイベントハンドラーの「oncontextmenu」プロパティーで制御する場合は、「false」を返して実行をキャンセルする。

※ 「addEventListener」(「contextmenu」)と「グローバルイベントハンドラーのプロパティー」(「oncontextmenu」)の違いは、複数記述したときに「複数の内容を登録できる」か「最後の記述ですべて上書きされる」か。

※ ブラウザ上で実行されるJavaScriptではwindowオブジェクトはグローバルオブジェクトなので、「window.」は省略できる。

//「contextmenu」イベントのイベントリスナーで制御する場合
window.addEventListener('contextmenu', function(e){
  e.preventDefault();
});

//グローバルイベントハンドラーの「oncontextmenu」プロパティーで制御する場合
window.oncontextmenu = function(){
  return false;
};

対象要素.addEventListener(‘イベントのタイプ’, ‘関数’, ‘イベント伝播順’) : 対象要素に指定のイベントでコールする関数を指定して登録。第3引数(初期値 : false)でイベントの伝播する方向を指定できる。falseでDOM階層の下位から上位に伝播。

event.preventDefault() : eventオブジェクトのメソッド。発生したイベントの規定の動作を行わない。イベントの伝播は止めない。

 

「copy」イベントのデフォルト動作を抑止

「テキストのコピー」ができないように制御する方法。(クリップボードへのコピーが処理されなくなる。)

※ windowオブジェクトは「oncopy」プロパティーを持たないので、「oncopy」プロパティーを使う場合は任意のHTML要素上で制御する。(下記では「document」上で制御。)

※ 「テキストの切り取り」にも対応する場合は、「cut」イベントか「oncut」プロパティーで制御する。

//「copy」イベントのイベントリスナーで制御する場合
window.addEventListener('copy', function(e){
  e.preventDefault();
});

//HTMLElementの「oncopy」プロパティーで制御する場合
document.oncopy = function(){
  return false;
};

 

「selectstart」イベントのデフォルト動作を抑止

「範囲選択の開始」ができないように制御する方法。(テキストや画像の範囲選択ができなくなる。)

※ iOS版Safariは非対応のイベントなのでCSSで対処する。

//「selectstart」イベントのイベントリスナーで制御する場合
window.addEventListener('selectstart', function(e){
  e.preventDefault();
});

//HTMLElementの「onselectstart」プロパティーで制御する場合
document.onselectstart = function(){
  return false;
};

 

「mousedown」イベントのデフォルト動作を抑止

左クリックを禁止にして「要素を選択」できないように制御する方法。(テキストや画像の範囲選択ができなくなる。)

下記ではサイト上での左クリックを完全に禁止にしているので、必要があれば要素を絞ってリスナー登録する。

※ 「click」イベントは禁止にしていないので、「click」イベントで発火するリンククリックなどはできる。

//「mousedown」イベントのイベントリスナーで制御する場合
window.addEventListener('mousedown', function(e){
  e.preventDefault();
});

//グローバルイベントハンドラーの「onmousedown」プロパティーで制御する場合
document.onmousedown = function(){
  return false;
};

 

 

2. CSSで制御して禁止にする方法

サイト上の内容の「範囲選択」や「ドラッグ」を不可にするため、下記のプロパティーの値を「none」に指定する。

  • user-select : サイト上の内容を範囲選択できるかを制御するプロパティー。(Can I use)
  • user-drag : サイト上の内容をドラッグできるかを制御するプロパティー。(Can I use)
  • pointer-events : ポインターイベントの対象を設定するプロパティー。

※ 「user-drag」は、非標準のCSSプロパティーなのでほとんどのブラウザでサポート外。

※ 「pointer-events」は、「none」の指定でクリック、ドラッグ、ホバーなどを無効にできるが、ターゲットとなる要素やブラウザによって挙動が異なる。

* {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
* {
 -webkit-user-drag: none;
 user-drag: none;
}
* {
 pointer-events: none;
}

 

 

右クリックや範囲選択の禁止を解除する方法

上記の対処で禁止にされている挙動を回避する方法。

  • 方法1 : ブラウザの初期設定でJavaScript自体をオフにして、すべてのJavaScriptを実行できないようにする。(禁止にしているJavaScriptが実行されないので回避できる。)
  • 方法2 : ブラウザのコンソールを開いて、「禁止にする挙動」を「禁止にしない挙動」で上書きするJavaScriptを実行する。

※ DOMの構築や表示エフェクトにJavaScriptを使っているサイトでは、方法1で回避できない場合があるので方法2の方が無難。

 

1. JavaScriptによるイベント制御を無効にする方法

ブラウザ上のJavaScriptでDOMツリーよりも上となる最上位のwindowオブジェクトの「addEventListener()メソッド」を利用する。

  1. 「addEventListener()メソッド」の第1引数に、禁止制御を無効にしたいイベントを指定。
  2. 「addEventListener()メソッド」の第2引数に、eventオブジェクトが持つ「stopPropagation()メソッド」の実行をリスナー関数として登録。(「stopPropagation()メソッド」は、次のDOM階層へのイベントの伝播を抑止する。)
  3. 「addEventListener()メソッド」の第3引数の拡張オプションに「capture : true」を指定。(イベントの伝播方向をDOMの上位から下位に指定する。)
  4. 「addEventListener()メソッド」の第3引数の拡張オプションに「passive : true」を指定。(「event.preventDefault()」の呼び出しを無効にする。)

上記の設定により、windowで各イベントリスナーに「event.preventDefault()」が登録されていたとしても「passive : true」で制御され無効になり、「capture : true」と「stopPropagation()メソッド」でwindowよりも下位方向のDOMツリーへのイベント伝播が止まるので、DOM内のどの要素に「event.preventDefault()」が登録されていたとしても、その要素でイベントが発火することは無く、「event.preventDefault()」が実行されることもなくなる。

「addEventListener()メソッド」の第3引数には拡張オプションがあり、オブジェクト形式で以下の指定ができる。

  • capture : boolean値。DOMツリーで下位方向の他のEventTargetに伝播する前に処理されるかどうか。(「true」で、イベントがDOMの上位から処理されて下位に伝播。)
  • once : boolean値。リスナーの呼び出しを1度だけにするかどうか。(「true」で、呼び出されたときに自動的に削除される。)
  • passive : boolean値。登録されているリスナー(関数)をpassive listenerとするかどうか。(「true」でpassiveとした場合、リスナーは「preventDefault()」を呼び出せず、イベントのデフォルト処理を抑止できない。「preventDefault()」を呼び出しても実行されずにコンソールに警告が出力される。)

※ オブジェクト形式ではなく、「false」か「true」のみを指定、または省略(初期値false)した場合は、拡張オプションではなくcaptureとして処理される。

※ 拡張オプションはすべてIE非サポート。

※ 現時点でSafariが非サポートの「signal」オプションもある。(abort()メソッドがコールされたときにリスナーを削除する。)

※ EventTarget.addEventListener()のmozillaの公式ドキュメント

 

「contextmenu」イベント制御の無効化

「コンテキストメニューの表示」が制御されている場合に無効化するJavaScript。

window.addEventListener('contextmenu', function(e){
  e.stopPropagation();
},{
  capture: true,
  passive: true
});

 

「copy」イベント制御の無効化

「テキストのコピー」をできないように制御されている場合に無効化するJavaScript。

window.addEventListener('copy', function(e){
  e.stopPropagation();
},{
  capture: true,
  passive: true
});

//「切り取り」の制御も無効化
window.addEventListener('cut', function(e){
  e.stopPropagation();
},{
  capture: true,
  passive: true
});

 

「selectstart」イベント制御の無効化

「範囲選択の開始」をできないように制御されている場合に無効化するJavaScript。

window.addEventListener('selectstart', function(e){
  e.stopPropagation();
},{
  capture: true,
  passive: true
});

 

「mousedown」イベント制御の無効化

「左クリック」できないように制御されている場合に無効化するJavaScript。

window.addEventListener('mousedown', function(e){
  e.stopPropagation();
},{
  capture: true,
  passive: true
});

 

 

2. CSSによる制御を無効にする方法

JavaScriptでDOMに新しいstyleの記述を動的に生成してCSSを上書きする。

  1. style要素を動的に生成。
  2. 必要なCSSプロパティーを中身に記述。
  3. body要素の最末尾に挿入する。(より後方のstyle記述が優先されるので。)

ワイルドカード(「*」)ですべての要素のCSSプロパティー「user-select」、「user-drag」、「pointer-events」の値を「auto !important」に設定して強制的に変更。

const ag2style = document.createElement('style');
ag2style.innerHTML = '* {-webkit-user-select: auto !important;-moz-user-select: auto !important;-ms-user-select: auto !important;user-select: auto !important;-webkit-user-drag: auto !important;user-drag: auto !important;pointer-events: auto !important;}';
document.body.appendChild(ag2style);

document.createElement(‘HTML要素タグ’) : 指定したHTML要素タグを生成する。指定した要素タグが認識できない場合は、不正なHTML要素である事を表すHTMLUnknownElementを生成する。

要素.innerHTML : 指定した要素内のHTMLまたはXMLのマークアップを取得したり設定したりする。

親ノード.appendChild(‘ノード’) : 指定した親ノードの子ノードリストの末尾に指定したノードを追加する。

 

 

3. 上記すべてをまとめて一括解除するJavaScript

上記の解除をコピペ用にまとめて1行にした記述とJavaScriptのブックマークレット。

※ 右クリック禁止にする処理の発火タイミングは、「setInterval」イベント(一定時間間隔)などで細工がされていることもありえるので、必要があれば都度対処する。

 

ブックマークレット用

ブラウザのブックマークバーに追加しておけば、クリックするだけでアクティブ状態のタブで実行される。

右クリック解除のブックマークレット

 

コピペ用

ブラウザのデベロッパーツールでコンソールを開き、ペーストして「enter」キーで実行できる。

addEventListener('contextmenu',function(e){e.stopPropagation();},{capture:true,passive:true});addEventListener('copy',function(e){e.stopPropagation();},{capture:true,passive:true});addEventListener('cut',function(e){e.stopPropagation();},{capture:true,passive:true});addEventListener('selectstart',function(e){e.stopPropagation();},{capture:true,passive:true});addEventListener('mousedown',function(e){e.stopPropagation();},{capture:true,passive:true });const ag2style=document.createElement('style');ag2style.innerHTML='* {-webkit-user-select:auto !important;-moz-user-select:auto !important;-ms-user-select:auto !important;user-select:auto !important;-webkit-user-drag:auto !important;user-drag:auto !important;pointer-events: auto !important;}';document.body.appendChild(ag2style);

 

 

この記事をシェア
この記事のURL

https://memo.ag2works.tokyo/post-2557/

コピー
この記事のタイトル

サイト上で右クリックを禁止にする方法と禁止を解除する方法。 | memo メモ [AG2WORKS]

コピー
この記事のリンクタグ

<a href="https://memo.ag2works.tokyo/post-2557/" target="_blank" rel="noopener">サイト上で右クリックを禁止にする方法と禁止を解除する方法。 | memo メモ [AG2WORKS]</a>

コピー
※ フィールドをクリックでコピーするテキストの編集ができます。

この記事へのコメント

コメントの書き込みはまだありません。

  • コメント内のタグはエスケープ処理され、文字列として出力されます。
  • セキュリティーのため、投稿者のIPアドレスは取得されます。
  • 管理者が内容を不適切と判断したコメントは削除されます。
  • このフォームにはスパム対策として、Googleの提供するreCAPTCHAシステムが導入されています。
    (Google Privacy Policy and Terms of Service.)