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";
}

表示結果

仕様書

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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

522 3

あり — 524

なし9 なし

392 6

あり — 397

なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり — 521 あり — 524 なし32 — 565 なし なし あり

1. Until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference.

2. This was removed from the Enable Experimental Web Platform Features due to a Web compatibility issue. In June 2017, it was removed entirely from the browsers. This is documented in Chromium bug 87553.

3. From version 52: this feature is behind the --enable-blink-features runtime flag (needs to be set to ContextMenu).

4. Until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

5. Support for the contextmenu attribute has been removed from Firefox for Android (See bug 1424252).

6. From version 39: this feature is behind the --enable-blink-features runtime flag (needs to be set to ContextMenu).

7. Until version 39 (exclusive): this feature is behind the Enable experimental Web Platform features preference.

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

[2] Firefox モバイルから contextmenu 属性の対応が削除されました (バグ 1424252)。

関連情報

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

このページの貢献者: mfuji09, YuichiNukiyama, yyss
最終更新者: mfuji09,