HTML oncontextmenu attribute

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要素へと伝播していく。

もし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の実行結果を次に示す。

avator

インタフェース

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
ポインタがこのポインタ型の主ポインタを表しているかどうかを示す。

関連記事

class

dir

id

lang

onblur

onchange

oncontextmenu

ondblclick

onfocus

onkeydown

onkeypress

onkeyup

onmousedown

onmousemove

onmouseout

onmouseover

onmouseup

onselect

style

title

参考文献

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

World Wide Web Consortium (2021) UI Events