contextmenu

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
contextmenu
非推奨
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 完全対応 79
無効
完全対応 79
無効
無効 From version 79: this feature is behind the --enable-blink-features runtime flag (needs to be set to ContextMenu).
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 未対応 なし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.
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 未対応 ? — 6.0

凡例

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

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

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

関連情報