当前位置：文江博客知识库简体中文文档 Web HTML Global_attributes contextmenu

contextmenu - HTML（超文本标记语言）编辑

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://www.wenjiangs.com/wp-content/uploads/2020/mozilla/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=" +
      "/wiki/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://www.wenjiangs.com/wp-content/uploads/2020/mozilla/promobutton_mdn"%3b%20 %0a%20%20%20%20%20%20index%20 %20"%3b.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.

浏览器兼容性

BCD tables only load in the browser

[1]通过命令行选项--enable-blink-features = ContextMenu可以获得实验性实现。直到Chrome 52和Opera 39之前，它还是一个可选的、实验性功能，但由于Web兼容性问题，现已被删除。在2017年6月，它从这两个浏览器里被完全移除了。这些记录在 Chrome bug 87553。

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

contextmenu - HTML（超文本标记语言）编辑

示例

HTML

JavaScript

结果

说明

浏览器兼容性

推荐阅读

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

contextmenu - HTML（超文本标记语言） 编辑

示例

HTML

JavaScript

结果

说明

浏览器兼容性

推荐阅读

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

contextmenu - HTML（超文本标记语言）编辑

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。