MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

contextmenu

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

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

例

HTML

<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>
      この例のどこででも、コンテキストメニューの "share" メニューを使用して
      Twitter や Facebook に、このページを共有できます。
    </li>
    <li contextmenu="changeFont" id="fontSizing">
      このリスト項目で、コンテキストメニューの "Increase/Decrease font" を使用して
      テキストのサイズを変更できます。
    </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">
      以下の画像で、コンテキストメニューから "Change Image" の
      アクションを実行できます。<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>
    </li>
  </ol>
</body>

JavaScript

function shareViaTwitter() {
  window.open("https://twitter.com/intent/tweet?text=" +
      "Hurray! I am learning ContextMenu from MDN via Mozilla");
}

function shareViaFacebook() {
  window.open("https://facebook.com/sharer/sharer.php?u=" +
      "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus");
}

function incFont() {
  document.getElementById("fontSizing").style.fontSize = "larger";
}

function decFont() {
  document.getElementById("fontSizing").style.fontSize = "smaller";
}

function changeImage() {
  var index = Math.ceil(Math.random() * 39 + 1);
  document.images[0].src =
      "https://developer.mozilla.org/media/img/promote/promobutton_mdn" +
      index + ".png";
}

表示結果

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
contextmenu の定義		 現行の標準 最新のスナップショットである HTML 5.1 から変更なし。
HTML 5.1
contextmenu の定義		 勧告 WHATWG HTML Living Standard のスナップショットであり、この属性を初めて定義しました。

ブラウザー実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 未サポート[1] 9 (9) 未サポート 未サポート[1] 未サポート
機能 Android Android 版 Chrome Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 未サポート 20 (20) 未サポート 未サポート ?

[1] コマンドラインオプション --enable-blink-features=ContextMenu を使用して、実験的な実装を使用できます。Chrome 52 および Opera 39 までは 試験運用版のウェブ プラットフォームの機能 フラグでも有効化できましたが、ウェブ互換性の問題 のために削除されました。この機能のサポートは Chromium bug 87553 で要望されています。

関連情報

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

タグ: 
 このページの貢献者: yyss
 最終更新者: yyss,