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.

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Deprecated
Chrome Full support 52
Notes Disabled
Full support 52
Notes Disabled
Notes This was removed from the Enable Experimental Web Platform Features due to a Web compatibility issue. In June 2017, it was removed entirely from the browsers. This is documented in Chromium bug 87553.
Disabled From version 52: this feature is behind the --enable-blink-features runtime flag (needs to be set to ContextMenu).
No support ? — 52
Disabled
Disabled Until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox Full support 9IE No support NoOpera Full support 39
Notes Disabled
Full support 39
Notes Disabled
Notes This was removed from the Enable Experimental Web Platform Features due to a Web compatibility issue. In June 2017, it was removed entirely from the browsers. This is documented in Chromium bug 87553.
Disabled From version 39: this feature is behind the --enable-blink-features runtime flag (needs to be set to ContextMenu).
No support ? — 39
Disabled
Disabled Until version 39 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
Safari No support NoWebView Android No support ? — 52
Disabled
No support ? — 52
Disabled
Disabled Until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
Chrome Android No support ? — 52
Disabled
No support ? — 52
Disabled
Disabled Until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile No support NoFirefox Android No support 32 — 56
Notes
No support 32 — 56
Notes
Notes Support for the contextmenu attribute has been removed from Firefox for Android (See bug 1424252).
Opera Android No support NoSafari iOS No support NoSamsung 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

Document Tags and Contributors

Contributors to this page: mdnwebdocs-bot, SphinxKnight, Legioinvicta
Last updated by: mdnwebdocs-bot,