©
本文档使用
php中文网手册 发布
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 | ? |