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>
      Anywhere in the example you can share the page on Twitter and
      Facebook using the Share menu from your context menu.
    </li>
    <li 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
    </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.<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";
}

结果

说明

Specification Status Comment
HTML Living Standard
contextmenu
Living Standard No change from latest snapshot, HTML 5.1
HTML 5.1
contextmenu
Recommendation Snapshot of HTML Living Standard, initial definition.

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

522 3

Yes — 524

No9 No

392 6

Yes — 397

No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes — 521 Yes — 524 No32 — 565 No No Yes

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之前,它还是一个可选的、实验性功能,但由于Web兼容性问题,现已被删除。在2017年6月,它从这两个浏览器里被完全移除了。这些记录在 Chromium bug 87553

[2]Firefox Mobile 已经不再支持 contextmenu 属性 (bug 1424252)。

推荐阅读

文档标签和贡献者

此页面的贡献者: eforegist, Ende93, shuangya
最后编辑者: eforegist,