contextmenu (attribute) - [ HTML 中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

directory search

Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp

characters

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";}

结果

规范

规范	状态	评论
HTML生活标准该规范中的'contextmenu'的定义。	生活水平	最新的快照，HTML 5.1没有变化
HTML 5.1该规范中'contextmenu'的定义。	建议	HTML Living Standard的快照，最初的定义。

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	No support1	9 (9)	No support	No support1	No support

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	No support	No support	20 (20)	No support	No support	?

Previous article： Next article：