Element: contextmenu イベント

contextmenu イベントは、ユーザーがコンテキストメニューを開こうとしたときに発行されます。このイベントは、通常、マウスの右ボタンをクリックするか、コンテキストメニューキーを押すことで発行されます。

後者の場合、コンテキストメニューは、フォーカスされた要素の左下に表示されます。ただし、要素がツリーの場合は、現在の行の左下に表示されます。

右クリックイベントが(イベントの preventDefault() メソッドを呼び出して)無効化されていない場合は、対象となる要素で contextmenu イベントが発行されます。

メモ: Firefox における例外: Shift キーを押しながら右クリックすると、contextmenu イベントが発生せずにコンテキストメニューが表示されます。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("contextmenu", (event) => {});

oncontextmenu = (event) => {};

イベント型

PointerEvent です。 MouseEvent を継承しています。

Event UIEvent MouseEvent PointerEvent

メモ: この仕様書の以前のバージョンでは、このイベントのイベント型は 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

html
<p id="noContextMenu">この段落ではコンテキストメニューが無効になっています。</p>
<p>しかし、この段落では無効になっていません。</p>

JavaScript

js
const noContext = document.getElementById("noContextMenu");

noContext.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});

結果

仕様書

Specification
UI Events
# event-type-contextmenu

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
contextmenu event
Is a PointerEvent
Experimental

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.

関連情報