©
This document uses PHP Chinese website manual Release
contextmenu
全局属性是指用于某个元素的“上下文菜单”的<menu>
的ID属性
上下文菜单是指在用户交互(例如右键点击)时出现的菜单。HTML5允许我们自定义此菜单。这里有一些实现示例,包括嵌套菜单。
<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>
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 | ? |