備忘録的プログラミングリファレンス

contextmenu ( oncontextmenu )イベント

 contextmenu ( oncontextmenu )イベントは、マウスの右クリックでコンテキストメニューを開いたら発生するMouseEventインターフェイスのイベントです。

oncontextmenu イベントハンドラー
document.getElementById('example').oncontextmenu = (event)=>{
	console.log( 'event type : ' + event.type );
};
詳しくは Example を参照してください

 右クリックによるコンテキストメニューを開くことを禁止するには、以下のようにreturn falseを使用する方法があります。

右クリックの禁止
<img oncontextmenu = "return false;" />
または
document.getElementById('example').oncontextmenu = (event)=>{
	return false;
};

 親エレメントへのバブリングも場合によってはevent.stopPropagation()で禁止したほうがよいかもしれません。

 addEventListener() では上記の右クリック禁止は機能しませんでした。

座標の取得

 座標の取得には以下の4つの方法があります。

座標の基準プロパティ名
スクリーンデバイスの左上端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)

BubblesYes
CancelableYes
InterfaceMouseEvent
Supported HTML ElementsAll HTML elements

Example

 contextmenu ( oncontextmenu )イベントの例です。

 contextmenu イベントは、右クリックで開くコンテキストメニューを開くと発生します。開発用コンソールにて event の内容が表示されます。

 スクリプト例に addEventListener() による定義もコメントアウトで加えておきました。いろいろ試してみてください。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。