contextmenu - HTML: HyperText Markup Language

在此页

范例
规范
浏览器兼容性
另请参阅
相关话题

contextmenu attribute is obsolete and will be removed from all browsers

contextmenu global attribute 是 id 的 <menu> to use as the contextual menu for this element.

A context menu is a menu that appears upon user interaction, such as a right-click. HTML5 now allows us to customize this menu. Here are some implementation examples, including nested menus.

范例

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 5.1 The definition of 'contextmenu' in that specification.	推荐	快照 HTML 实时标准，初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`contextmenu` 弃用	Chrome 完整支持 52 注意事项 Disabled 完整支持 52 注意事项 Disabled 注意事项 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 . Disabled From version 52: this feature is behind the `--enable-blink-features` runtime flag (needs to be set to `ContextMenu` ). 不支持 ? — 52 Disabled Disabled 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 Disabled 完整支持 79 Disabled Disabled From version 79: this feature is behind the `--enable-blink-features` runtime flag (needs to be set to `ContextMenu` ).	Firefox 完整支持 9	IE 不支持 No	Opera 完整支持 39 注意事项 Disabled 完整支持 39 注意事项 Disabled 注意事项 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 . Disabled From version 39: this feature is behind the `--enable-blink-features` runtime flag (needs to be set to `ContextMenu` ). 不支持 ? — 39 Disabled Disabled Until version 39 (exclusive): this feature is behind the `Enable experimental Web Platform features` preference.	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 ? — 52 Disabled 不支持 ? — 52 Disabled Disabled 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 注意事项注意事项支持 `contextmenu` attribute has been removed from Firefox for Android (See bug 1424252 ).	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 ? — 6.0

图例

完整支持
不支持
弃用。不要用于新网站。
见实现注意事项。
用户必须明确启用此特征。

[1] An experimental implementation was originally available via the command line option --enable-blink-features=ContextMenu . Until Chrome 52 and Opera 39 it was additionally available by enabling the Experimental Web Platform features option, but got removed from that due to a Web compatibility issue . In June 2017, it was removed entirely from the browsers. This is documented in Chrome bug 87553 .

[2] Support for the contextmenu attribute has been removed from Firefox Mobile ( bug 1424252 ).

另请参阅

所有全局属性
HTMLElement.contextMenu

元数据

最后修改： Aug 5, 2020

HTML
教程：
HTML 基础
HTML 介绍
多媒体和嵌入
参考：
HTML 元素
1. <a>
2. <abbr>
3. <acronym>
4. <address>
5. <applet>
6. <area>
7. <article>
8. <aside>
9. <audio>
10. <b>
11. <base>
12. <basefont>
13. <bdi>
14. <bdo>
15. <bgsound>
16. <big>
17. <blink>
18. <blockquote>
19. <body>
20. <br>
21. <button>
22. <canvas>
23. <caption>
24. <center>
25. <cite>
26. <code>
27. <col>
28. <colgroup>
29. <command>
30. <content>
31. <data>
32. <datalist>
33. <dd>
34. <del>
35. <details>
36. <dfn>
37. <dialog>
38. <dir>
39. <div>
40. <dl>
41. <dt>
42. <element>
43. <em>
44. <embed>
45. <fieldset>
46. <figcaption>
47. <figure>
48. <font>
49. <footer>
50. <form>
51. <frame>
52. <frameset>
53. <h1>
54. <head>
55. <header>
56. <hgroup>
57. <hr>
58. <html>
59. <i>
60. <iframe>
61. <image>
62. <img>
63. <input>
64. <ins>
65. <isindex>
66. <kbd>
67. <keygen>
68. <label>
69. <legend>
70. <li>
71. <link>
72. <listing>
73. <main>
74. <map>
75. <mark>
76. <marquee>
77. <menu>
78. <menuitem>
79. <meta>
80. <meter>
81. <multicol>
82. <nav>
83. <nextid>
84. <nobr>
85. <noembed>
86. <noframes>
87. <noscript>
88. <object>
89. <ol>
90. <optgroup>
91. <option>
92. <output>
93. <p>
94. <param>
95. <picture>
96. <plaintext>
97. <pre>
98. <progress>
99. <q>
100. <rb>
101. <rp>
102. <rt>
103. <rtc>
104. <ruby>
105. <s>
106. <samp>
107. <script>
108. <section>
109. <select>
110. <shadow>
111. <slot>
112. <small>
113. <source>
114. <spacer>
115. <span>
116. <strike>
117. <strong>
118. <style>
119. <sub>
120. <summary>
121. <sup>
122. <table>
123. <tbody>
124. <td>
125. <template>
126. <textarea>
127. <tfoot>
128. <th>
129. <thead>
130. <time>
131. <title>
132. <tr>
133. <track>
134. <tt>
135. <u>
136. <ul>
137. <var>
138. <video>
139. <wbr>
140. <xmp>
全局属性
1. accesskey
2. autocapitalize
3. class
4. contenteditable
5. contextmenu
6. data-*
7. dir
8. draggable
9. dropzone
10. hidden
11. id
12. inputmode
13. is
14. itemid
15. itemprop
16. itemref
17. itemscope
18. itemtype
19. lang
20. part
21. slot
22. spellcheck
23. style
24. tabindex
25. title
26. translate
27. x-ms-acceleratorkey
28. x-ms-format-detection
<input> 类型
文档编制：
有用清单

All pages index

Pages tagged "HTML"
贡献
1. HTML 文档状态
2. MDN 工程

在此页

范例

HTML

JavaScript

结果

规范

浏览器兼容性

图例

另请参阅

相关话题