JavaScript 右クリックの抑止

Rev.7を表示中。最新版はこちら。

右クリックされた時にコンテキストメニューが出るのを抑止する方法。

対象：IE6、FireFox

1. 抑止方法

右クリックされた時のイベントはoncontextmenuで取得できる。このイベントハンドラでfalseを返してイベントをキャンセルしてやればよい。

以下はdocument全体で右クリックを抑止する例。documentを特定のElementにすれば、そのElementの上だけで抑止される。

document.oncontextmenu = function () {return false;}

2. iframe内での右クリックの抑止

iframe内での右クリックを抑止する場合、IEとFireFoxで処理を分けないといけなかった。

2.1 IE6でのやりかた

基本的に上記のやりかたと同じ。iframeのドキュメントを取得して、そのドキュメントのoncontextmenuにfalseを返すハンドラを設定すればよい。

 var doc = frames['frameID'].document;  ('frameID'はiframeのID)
 doc.oncontextmenu = function () {return false;}

2.2 FireFoxでのやりかた

IE6と異なるのは以下の2点。

イベントハンドラの設定にaddEventListener()を使用する。
ハンドラ内でpreventDefault()メソッドを呼ぶ。

var doc = document.getElementById('frameID').contentDocument;
doc.addEventListener('contextmenu',
                      function (event) {
                            event.preventDefault();
                            return false;},
                      false);

[メモ]
1. については、iframe内のdocumentにイベントハンドラを設定するにはaddEventListener()で登録しないとできないみたい。doc.oncontextmenuのようにプロパティに設定する方法ではイベントハンドラが呼び出されなかった。

2. については、preventDefault()を呼び出しておかないと右クリックした時に通常通りコンテキストメニューが表示されてしまうため。preventDefault()はイベントをキャンセルし、デフォルト動作(この場合はコンテキストメニューの表示)が発生しなくなる。通常のdocumentではpreventDefault()がなくても、なぜメニュー表示を抑止できているのかは不明。。。