Attributesaccesskey (attribute)class (attribute)contenteditable (attribute)contextmenu (attribute)data-* (attribute)dir (attribute)draggable (attribute)dropzone (attribute)Global attributeshidden (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)Elementsaabbraddressareaarticleasideaudiobbasebdibdoblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1headheaderhrhtmliiframeimginputinput type="button"input type="checkbox"input type="color"input type="date"input type="datetime"-localinput 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"inskbdlabellegendlilinkmainmapmarkmenumenuitemmetameternavnoscriptobjectoloptgroupoptionoutputpparampicturepreprogressqrprtrtcrubyssampscriptsectionselectslotsmallsourcespanstrongstylesubsummarysuptabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbrMiscellaneousAttributesBlock-level elementsCORS enabled imageCORS settings attributesElementInline elementsKinds of HTML contentLink typesMicrodataOptimizing your pages for speculative parsingPreloading contentReferenceSupported media formatsUsing the application cacheObsoleteacronymappletbasefontbigblinkcentercommandcontentdirelementfontframeframesethgroupimageinput type="datetime"isindexkeygenlistingmarqueenextidnoframesplaintextstrikettxmp
©
本文档使用
php.cn手册 发布
文字
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 | ? |