HTML の oncontextmenu 属性

HTML タグの oncontextmenu 属性には、要素上でマウスの右ボタンをクリックしたときに実行する JavaScript を指定する。

HTML

HTMLでコンテキストメニューのイベントハンドラを指定する。

<tag oncontextmenu="javascript">

oncontextmenu属性で関数を呼び出す場合、第1引数にイベント・オブジェクトを渡すことができる。

<tag oncontextmenu="func(arguments[0])">

oncontextmenu属性で関数を呼び出す場合、第2引数にエレメント・オブジェクトを渡すことができる。

<tag oncontextmenu="func(arguments[0], this)">

JavaScript

JavaScriptでコンテキストメニューのイベントハンドラを指定する。

object.oncontextmenu = function(){ script };

object.addEventListener("contextmenu", script);

jQuery

jQueryでコンテキストメニューのイベントハンドラを指定する。

window.jQuery(expr).on("contextmenu", function([event]){ script });

jQuery(expr).on("contextmenu", function([event]){ script });

$(expr).on("contextmenu", function([event]){ script });

使用例

<p oncontextmenu="alert('右クリックされました。');">
  ここを右クリックしてください。
</p>

上記の実行結果を次に示す。

ここを右クリックしてください。

要素

次に示すイベント・ハンドラ・コンテンツ属性は、任意のHTML要素に指定することができる。

バブリング

contextmenuイベントはバブリング（下位の要素から上位の要素へ伝播）する。

HTMLが次に示す構造である場合、input要素で発生したcontextmenuイベントは、fieldset、form、body及びhtml要素へと伝播していく。

html
- body
  - form
    - fieldset
      - input

もしfieldset、form、body及びhtml要素にoncontextmenu属性を指定した場合、それらのJavaScriptも実行される。

イベントのキャンセル

contextmenuイベントはキャンセル可能である。contextmenuイベントをキャンセルすると、コンテキストメニュー表示等のデフォルト動作が行われなくなる。

イベントをキャンセルするには、イベントオブジェクトの preventDefault メソッドを使う。

画像を右クリックしてもコンテキストメニューを表示させない例を次に示す。

<img src="/images/portrait.jpg" oncontextmenu="cancelEvent(arguments[0]);" alt="portrait">
<script>
  function cancelEvent(event) {
    event.preventDefault()
  }
</script>

上記HTMLの実行結果を次に示す。

インタフェース

contextmenuイベントは PointerEventインタフェースを実装している。

PointerEventインタフェースは次に示すプロパティを持つ。

pointerId

イベントを発生させたポインタの一意な識別子

width

ポインタのX軸の大きさをCSSピクセルで指定する。

height

ポインタのY軸の大きさをCSSピクセルで指定する。

pressure

0～1の範囲におけるポインタ入力の正規化された圧力。ここで、0と1はそれぞれハードウェアが検出できる最小圧力と最大圧力を表す。

tangentialPressure

通常、追加のコントロール（エアブラシのスタイラスのフィンガーホイールなど）によって設定される、ポインタ入力の正規化接線圧力（バレル圧力とも呼ばれる）である。

tiltX

tiltY

twist

ペン／スタイラスなどのトランスデューサーの、自身の長軸を中心とした時計回りの回転度数

altitudeAngle

azimuthAngle

pointerType

イベントを発生させたデバイスの種類を示す。

値	説明
mouse	マウス
pen	電子ペン
touch	タッチパネル

isPrimary

ポインタがこのポインタ型の主ポインタを表しているかどうかを示す。

参考文献

Web Hypertext Application Technology Working Group (2022) "Web application APIs" HTML Living Standard

World Wide Web Consortium (2021) UI Events