Element: contextmenu イベント
contextmenu
イベントは、ユーザーがコンテキストメニューを開こうとしたときに発行されます。このイベントは、通常、マウスの右ボタンをクリックするか、コンテキストメニューキーを押すことで発行されます。
後者の場合、コンテキストメニューは、フォーカスされた要素の左下に表示されます。ただし、要素がツリーの場合は、現在の行の左下に表示されます。
右クリックイベントが(イベントの preventDefault()
メソッドを呼び出して)無効化されていない場合は、対象となる要素で contextmenu
イベントが発行されます。
メモ:
Firefox における例外: Shift キーを押しながら右クリックすると、contextmenu
イベントが発生せずにコンテキストメニューが表示されます。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("contextmenu", (event) => {});
oncontextmenu = (event) => {};
イベント型
PointerEvent
です。 MouseEvent
を継承しています。
メモ:
この仕様書の以前のバージョンでは、このイベントのイベント型は MouseEvent
でした。 Firefox と Safari では今でもこの型で渡されます。
イベントプロパティ
このインターフェイスは、MouseEvent
および Event
からプロパティを継承しています。
PointerEvent.altitudeAngle
読取専用 Experimental-
トランスデューサー(ポインターまたはスタイラス)の軸と機器の画面の X-Y 平面のなす角度を表します。
PointerEvent.azimuthAngle
読取専用 Experimental-
Y-Z 平面と、トランスデューサー(ポインターまたはスタイラス)の軸と Y 軸の両方を格納する平面との間の角度を表します。
PointerEvent.pointerId
読取専用-
イベントの原因となっているポインターの一意の識別子。
PointerEvent.width
読取専用-
ポインターの接触形状の幅(X 軸上の大きさ、CSS ピクセル単位)。
PointerEvent.height
読取専用-
ポインターの接触形状の高さ(Y 軸上の大きさ、CSS ピクセル単位)。
PointerEvent.pressure
読取専用-
0 から 1 の範囲のポインター入力の正規化された圧力。 ここで、0 と 1 は、それぞれハードウェアが検出できる最小圧力と最大圧力を表します。
PointerEvent.tangentialPressure
読取専用-
ポインター入力の正規化された接線圧力(バレル圧力またはシリンダー応力(cylinder stress)とも呼ばれます)は
-1
から1
の範囲で、0
はコントロールの中立位置です。 PointerEvent.tiltX
読取専用-
Y-Z 平面と、ポインター(ペン/スタイラスなど)軸と Y 軸の両方を含む平面との間の平面角度(度単位、
-90
から90
の範囲)。 PointerEvent.tiltY
読取専用-
X-Z 平面と、ポインター(ペン/スタイラスなど)軸と X 軸の両方を含む平面との間の平面角度(度単位、
-90
から90
の範囲)。 PointerEvent.twist
読取専用-
ポインター(ペン/スタイラスなど)の長軸を中心とした時計回りの回転の度数(
0
から359
の範囲の値)。 PointerEvent.pointerType
読取専用-
イベントの原因となった機器の種類(マウス、ペン、タッチなど)を示します。
PointerEvent.isPrimary
読取専用-
ポインターがこのポインターの種類の主ポインターを表しているかどうかを示します。
例
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 |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
contextmenu event | ||||||||||||
Is a PointerEvent |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.