contextmenu

版本：HTML废弃

contextmenu全局属性是指用于某个元素的“上下文菜单”的<menu>的ID属性。上下文菜单是指在用户交互（例如右键点击）时出现的菜单。 HTML5允许我们自定义此菜单。这里有一些实现示例，包括嵌套菜单。

contextmenu属性已经过时，将从所有浏览器中删除。

浏览器支持


目前只有IE、safari不支持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 ofHTML Living Standard, initial definition.

<div>元素的上下文菜单。当用户右击元素时将显示上下文菜单：<div contextmenu="mymenu">
	<menu type="context" id="mymenu">
		 <menuitem label="refresh"></menuitem>
		 <menuitemlabel="twitter"></menuitem>
	</menu>
</div>

定义和用法

contextmenu 属性规定了元素的上下文菜单。当用户右击元素时将显示上下文菜单。/p>

contextmenu 属性的值是需要打开的<menu>元素的 id。

HTML 4.01 与 HTML5之间的差异

contextmenu 属性是 HTML5 中的新属性。

语法

<element contextmenu="menu_id">

属性值

值	描述
menu_id	要打开的<menu>元素的 id。