contextmenu ( oncontextmenu )イベント
contextmenu ( oncontextmenu )イベントは、コンテキストメニューを開いたら発生するポインティングデバイスに関するイベントです。コンテキストメニューは右クリックで開くようなメニューのことです。
document.getElementById('example').oncontextmenu = (event)=>{
console.log( 'event type : ' + event.type );
};
詳しくは Example を参照してください
コンテキストメニューを非表示にする方法や座標の取得方法については、contextmenu ( oncontextmenu )イベントについてを参照してください。
- ad -
contextmenu ( oncontextmenu )イベントについて
コンテキストメニューの非表示方法と座標の取得方法についてです。
コンテキストメニューの非表示
右クリックによるコンテキストメニューを開くことを禁止するには、以下のようにreturn false
を使用する方法があります。
<img oncontextmenu = "return false;" />または
document.getElementById('example').oncontextmenu = (event)=>{
return false;
};
これらの方法はイベントハンドラーで有効です。
親エレメントへのバブリングも場合によってはevent.stopPropagation()
で禁止したほうがよいかもしれません。
addEventListener() では option で false を設定した上で、event.preventDefault() を使用します。
document.getElementById("example").addEventListener( "contextmenu",(event)=>{
event.preventDefault();
}, false);
座標の取得
座標の取得には以下の４つの方法があります。
| 座標の基準 | プロパティ名 |
|---|---|
| スクリーンデバイスの左上端 | event.screenX、event.screenY |
| ブラウザの表示エリアの左上端 | event.clientX、event.clientY |
| ドキュメントの左上端 | event.pageX、event.pageY |
| エレメントの左上端 | event.offsetX、event.offsetY |
構文（Syntax）
HTMLPreElement にイベントハンドラーを定義する方法には以下があります。
in HTML
<tagelement oncontextmenu ="function(); ...;">
in JavaScript
object.oncontextmenu = function(){... };
addEventListener()
関数の呼び出し。関数名のみ使用で、event 以外の引数が渡せない。
object.addEventListener("contextmenu ", function_name);
スクリプトを直接記述する方法。スクリプトから関数を呼び出せる。
object.addEventListener("contextmenu ", ()=>{ ... },false);
// または
object.addEventListener("contextmenu ",function(){ ... },false);
イベントについてはEventを参照してください。 イベントの監視についてはEventTargetが担っています。
備考（Remarks）
| Bubbles | Yes |
| Cancelable | Yes |
| Interface | MouseEvent |
| Supported HTML Elements | All HTML elements |
Example
contextmenu ( oncontextmenu )イベントの例です。
contextmenu イベントは、右クリックで開くコンテキストメニューを開くと発生します。開発用コンソールにて event の内容が表示されます。
スクリプト例に addEventListener() による定義もコメントアウトで加えておきました。いろいろ試してみてください。
- ad -