contextmenu

contextmenu グローバル属性は、当該要素のコンテキストメニューとして使用する <menu> 要素の id です。

コンテキストメニューは、右クリックなどユーザの操作によって現れます。HTML5 ではこのメニューをカスタマイズできます。以下は入れ子のメニューを含む実装例です。

例

HTML:

<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Hurray! I am learning ContextMenu from MDN via Mozilla');"></menuitem>
      <menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus');"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>Anywhere in the example you can share the page on Twitter and Facebook using the Share menu from your context menu.</li>
    <li><pre contextmenu="changeFont" id="fontSizing">On this specific list element, you can change the size of the text by using the "Increase/Decrease font" actions from your context menu</pre></li>
    <menu type="context" id="changeFont">
      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">On the image below, you can fire the "Change Image" action in your Context Menu.</li><br />
    <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
    <menu type="context" id="ChangeImage">
      <menuitem label="Change Image" onclick="changeImage()"></menuitem>
    </menu>
  </ol>
</body>

以下の JavaScript とともに使用します:

function incFont(){
  document.getElementById("fontSizing").style.fontSize="larger";
}
function decFont(){
  document.getElementById("fontSizing").style.fontSize="smaller";
}
function changeImage(){
  var j = Math.ceil((Math.random()*39)+1);
  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
}

結果は以下のとおりです:

仕様

仕様書	策定状況	コメント
WHATWG HTML Living Standard The definition of 'contextmenu' in that specification.	Living Standard	最新のスナップショットである HTML5.1 から変更なし。
HTML5.1 The definition of 'contextmenu' in that specification.	草案	WHATWG HTML Living Standard のスナップショットであり、この属性を初めて定義しました。

機能	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
基本サポート	未サポート	9 (9)	未サポート	未サポート	未サポート

機能	Android	Android 版 Chrome	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
基本サポート	未サポート	未サポート	未サポート	未サポート	未サポート

contextmenu

例

仕様

ブラウザ実装状況

関連情報

ドキュメントのタグと貢献者