Obsolète
Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.

Attention ! Cet attribut est obsolète et sera retiré de l'ensemble des navigateurs.

L'attribut universel contextmenu correspond à l'identifiant d'un élément <menu> qu'on souhaite utiliser comme menu contextuel pour l'élément courant.

Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.

Exemples

Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :

HTML

<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="Partager">
      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>
      Dans cet exemple, vous pouvez partager un lien vers
      cette page sur Facebook et/ou Twitter via le groupe Partager
      du menu contextuel
    </li>
    <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li>
    <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li>
    <menu type="context" id="changeFont">
      <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem>
      <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut  utiliser l'option "Changer l'image" du menu.</li><br />
    <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
    <menu type="context" id="ChangeImage">
      <menuitem label="Changer l'image" onclick="changeImage()"></menuitem>
    </menu>
  </ol>
</body>

JavaScript

function shareViaTwitter() {
  window.open("https://twitter.com/intent/tweet?text=" +
      "Je découvre ContextMenu avec MDN.");
}

function shareViaFacebook() {
  window.open("https://facebook.com/sharer/sharer.php?u=" +
      "https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contextmenu");
}
function incFont(){
  document.getElementById("fontSizing").style.fontSize="larger";
}

function decFont(){
  document.getElementById("fontSizing").style.fontSize="smaller";
}

function changeImage(){
  var j = Math.ceil((Math.random()*39)+1);
  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
}

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de 'contextmenu' dans cette spécification.
Standard évolutif Pas de modification depuis le dernier état de HTML 5.1
HTML 5.1
La définition de 'contextmenu' dans cette spécification.
Recommendation Dérivation de HTML Living Standard, définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Obsolète
Chrome Support complet 52
Notes Désactivée
Support complet 52
Notes Désactivée
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.
Désactivée From version 52: this feature is behind the --enable-blink-features runtime flag (needs to be set to ContextMenu).
Aucun support ? — 52
Désactivée
Désactivée Until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Aucun support NonFirefox Support complet 9IE Aucun support NonOpera Support complet 39
Notes Désactivée
Support complet 39
Notes Désactivée
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.
Désactivée From version 39: this feature is behind the --enable-blink-features runtime flag (needs to be set to ContextMenu).
Aucun support ? — 39
Désactivée
Désactivée Until version 39 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
Safari Aucun support NonWebView Android Aucun support ? — 52
Désactivée
Aucun support ? — 52
Désactivée
Désactivée Until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
Chrome Android Aucun support ? — 52
Désactivée
Aucun support ? — 52
Désactivée
Désactivée 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 Aucun support NonFirefox Android Aucun support 32 — 56
Notes
Aucun support 32 — 56
Notes
Notes Support for the contextmenu attribute has been removed from Firefox for Android (See bug 1424252).
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,