From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../html/global_attributes/contextmenu/index.html | 127 +++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 files/zh-cn/web/html/global_attributes/contextmenu/index.html (limited to 'files/zh-cn/web/html/global_attributes/contextmenu') diff --git a/files/zh-cn/web/html/global_attributes/contextmenu/index.html b/files/zh-cn/web/html/global_attributes/contextmenu/index.html new file mode 100644 index 0000000000..4a42601760 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/contextmenu/index.html @@ -0,0 +1,127 @@ +--- +title: contextmenu +slug: Web/HTML/Global_attributes/contextmenu +tags: + - Global attributes + - HTML + - 全局属性 + - 参考 +translation_of: Web/HTML/Global_attributes/contextmenu +--- +
{{HTMLSidebar("Global_attributes")}}
+ +
+

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

+
+ +
contextmenu全局属性是指用于某个元素的“上下文菜单”的{{HTMLElement("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";
+}
+
+ +

结果

+ +

{{EmbedLiveSample('示例', "100%", 400)}}

+ +

说明

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "forms.html#attr-contextmenu", "contextmenu")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.
+ +

浏览器兼容性

+ +

{{Compat("html.global_attributes.contextmenu")}}

+ +

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

+ +

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

+ +

推荐阅读

+ + -- cgit v1.2.3-54-g00ecf