JavaScript 右クリックの抑止
右クリックされた時にコンテキストメニューが出るのを抑止する方法。
対象:IE6、FireFox
以下はdocument全体で右クリックを抑止する例。documentを特定のElementにすれば、そのElementの上だけで抑止される。
2.1 IE6でのやりかた
基本的に上記のやりかたと同じ。iframeのドキュメントを取得して、そのドキュメントのoncontextmenuにfalseを返すハンドラを設定すればよい。
2.2 FireFoxでのやりかた
IE6と異なるのは以下の2点。
1. については、iframe内のdocumentにイベントハンドラを設定するにはaddEventListener()で登録しないとできないみたい。doc.oncontextmenuのようにプロパティに設定する方法ではイベントハンドラが呼び出されなかった。
2. については、return falseでは右クリックした時になぜか通常通りコンテキストメニューが表示されてしまう。preventDefault()を呼び出すとイベントをキャンセルし、デフォルト動作(この場合はコンテキストメニューの表示)が発生しなくなる。通常のdocumentでもpreventDefault()がなければ、メニューが表示されてもよさそうだが、この挙動の違いの理由は不明。。。
対象: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()を使用する。
- ハンドラ内でfalseを返す代わりにpreventDefault()メソッドを呼ぶ。
var doc = document.getElementById('frameID').contentDocument;[メモ]
doc.addEventListener('contextmenu',
function (event) {
event.preventDefault();},
false);
1. については、iframe内のdocumentにイベントハンドラを設定するにはaddEventListener()で登録しないとできないみたい。doc.oncontextmenuのようにプロパティに設定する方法ではイベントハンドラが呼び出されなかった。
2. については、return falseでは右クリックした時になぜか通常通りコンテキストメニューが表示されてしまう。preventDefault()を呼び出すとイベントをキャンセルし、デフォルト動作(この場合はコンテキストメニューの表示)が発生しなくなる。通常のdocumentでもpreventDefault()がなければ、メニューが表示されてもよさそうだが、この挙動の違いの理由は不明。。。