This translation is in progress.
L'atribut global contextmenu és l'id d'un <menu> per ser utilitzat com el menú contextual d'aquest element.
Un menú contextual és un menú que apareix després de la interacció de l'usuari, com un clic dret. HTML5 ara ens permet personalitzar aquest menú. Aquests són alguns exemples d'implementació, incloent menús niats.
Exemple
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";
}
Resultat
Especificacions
| Especificació | Estat | Comentari |
|---|---|---|
| HTML Living Standard The definition of 'contextmenu' in that specification. |
Living Standard | Sense canvis des de l'última instantània, HTML 5.1 |
| HTML 5.1 The definition of 'contextmenu' in that specification. |
Recommendation | Instantània de HTML Living Standard, definició inicial. |
Navegadors compatibles
Update compatibility data on GitHub
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Basic support | Chrome
Full support
52
| Edge No support No | Firefox Full support 9 | IE No support No | Opera
Full support
39
| Safari No support No | WebView Android
No support
? — 52
| Chrome Android
No support
? — 52
| Edge Mobile No support No | Firefox Android
No support
32 — 56
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
[1] Una implementació experimental està disponible a través de l'opció de línia d'ordres --enable-blink-features=ContextMenu. Fins Chrome 52 i Opera 39 estava disponible l'opció d'habilitació de les característiques de la Plataforma Web Experimental, però va ser eliminada a causa d'un problema de compatibilitat web. El suport per aquesta caracteristica se sol·licita en Chromium bug 87553.
Veure
- Tots els atributs globals.
HTMLElement.contextMenu