Element: contextmenu イベント
contextmenu
イベントは、ユーザーがコンテキストメニューを開こうとしたときに発行されます。このイベントは、通常、マウスの右ボタンをクリックするか、コンテキストメニューキーを押すことで発行されます。
後者の場合、コンテキストメニューは、フォーカスされた要素の左下に表示されます。ただし、要素がツリーの場合は、現在の行の左下に表示されます。
右クリックイベントが(イベントの preventDefault()
メソッドを呼び出して)無効化されていない場合は、対象となる要素で contextmenu
イベントが発行されます。
メモ: Firefox における例外: Shift キーを押しながら右クリックすると、contextmenu
イベントが発生せずにコンテキストメニューが表示されます。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("contextmenu", (event) => {});
oncontextmenu = (event) => {};
イベント型
MouseEvent
です。 Event
を継承しています。
イベントプロパティ
親である UIEvent
および Event
から継承したプロパティもあります。
MouseEvent.altKey
読取専用-
このマウスイベントが発行されたときに alt キーが押されていた場合は
true
を返します。 -
このマウスイベントが発行されたときに押されていたボタンの番号です(もしあれば)。
-
このマウスイベントが発行されたときに押されていたボタンです(もしあれば)。
MouseEvent.clientX
読取専用-
ビューポート座標におけるマウスポインターの X 座標です。
MouseEvent.clientY
読取専用-
ビューポート座標におけるマウスポインターの Y 座標です。
MouseEvent.ctrlKey
読取専用-
このマウスイベントが発行されたときに control キーが押されていた場合は
true
を返します。 MouseEvent.layerX
Non-standard 読取専用-
このイベントの現在のレイヤーにおける相対の水平座標を返します。
MouseEvent.layerY
Non-standard 読取専用-
このイベントの現在のレイヤーにおける相対の垂直座標を返します。
MouseEvent.metaKey
読取専用-
このマウスイベントが発行されたときに meta キーが押されていた場合は
true
を返します。 MouseEvent.movementX
読取専用-
前回の
mousemove
イベントの位置から相対的なマウスポインターの X 座標です。 MouseEvent.movementY
読取専用-
前回の
mousemove
イベントの位置から相対的なマウスポインターの Y 座標です。 MouseEvent.offsetX
読取専用-
対象ノードのパディング辺からの相対的なマウスポインターの X 座標です。
MouseEvent.offsetY
読取専用-
対象ノードのパディング辺からの相対的なマウスポインターの Y 座標です。
MouseEvent.pageX
読取専用-
文書全体からの相対的なマウスポインターの X 座標です。
MouseEvent.pageY
読取専用-
文書全体からの相対的なマウスポインターの Y 座標です。
-
もしあれば、イベントの副ターゲットです。
MouseEvent.screenX
読取専用-
スクリーン座標におけるマウスポインターの X 座標です。
MouseEvent.screenY
読取専用-
スクリーン座標におけるマウスポインターの Y 座標です。
MouseEvent.shiftKey
読取専用-
このマウスイベントが発行されたときに shift キーが押されていた場合は
true
を返します。 MouseEvent.mozInputSource
Non-standard 読取専用-
イベントを発生させた機器の種類(
MOZ_SOURCE_*
定数のいずれか)。 これにより、例えばマウスイベントが実際のマウスによって生成されたのか、タッチイベントによって生成されたのかを判断することができます(これはイベントに関連付けられた座標を解釈する精度に影響するかもしれません)。 MouseEvent.webkitForce
Non-standard 読取専用-
クリックしたときに適用された圧力です。
MouseEvent.x
読取専用-
MouseEvent.clientX
の別名です。 MouseEvent.y
読取専用-
MouseEvent.clientY
の別名です。
例
contextmenu
イベントのキャンセル
この例では、最初の段落で contextmenu
イベントが発行されたときに、preventDefault()
を使って contextmenu
イベントの既定のアクションをキャンセルしています。その結果、第 1 段落は右クリックしても何も起こらず、第 2 段落にはブラウザーが提供する標準的なコンテキストメニューが表示されることになります。
メモ: Firefox では、Shift キーを押しながら右クリックすると、contextmenu
イベントが発生せずにコンテキストメニューが表示されます。そのため、イベントをキャンセルしてもコンテキストメニューの表示を止めることはできません。
HTML
<p id="noContextMenu">この段落ではコンテキストメニューが無効になっています。</p>
<p>しかし、この段落では無効になっていません。</p>
JavaScript
const noContext = document.getElementById("noContextMenu");
noContext.addEventListener("contextmenu", (e) => {
e.preventDefault();
});
結果
仕様書
Specification |
---|
UI Events # event-type-contextmenu |
ブラウザーの互換性
BCD tables only load in the browser