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
contextmenu の定義
勧告 HTML Living Standard のスナップショットであり、初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
非推奨
Chrome 完全対応 52
補足 無効
完全対応 52
補足 無効
補足 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.
無効 From version 52: this feature is behind the --enable-blink-features runtime flag (needs to be set to ContextMenu).
未対応 ? — 52
無効
無効 Until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 未対応 なしFirefox 完全対応 9IE 未対応 なしOpera 完全対応 39
補足 無効
完全対応 39
補足 無効
補足 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.
無効 From version 39: this feature is behind the --enable-blink-features runtime flag (needs to be set to ContextMenu).
未対応 ? — 39
無効
無効 Until version 39 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
Safari 未対応 なしWebView Android 未対応 ? — 52
無効
未対応 ? — 52
無効
無効 Until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
Chrome Android 未対応 ? — 52
無効
未対応 ? — 52
無効
無効 Until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile 未対応 なしFirefox Android 未対応 32 — 56
補足
未対応 32 — 56
補足
補足 Support for the contextmenu attribute has been removed from Firefox for Android (See bug 1424252).
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

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

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

関連情報

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

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