Element : évènement contextmenu

L'évènement contextmenu est déclenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel.

Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante.

Tout évènement de clic-droit qui n'est pas désactivé (via preventDefault()) entraînera le déclenchement d'un évènement contextmenu sur l'élément cible.

Se propage/remonte dans le DOM Oui
Annulable Oui
Interface MouseEvent
Propriété pour la gestion d'évènement oncontextmenu

Exemples

Dans cet exemple, on annule l'action par défaut de l'évènement contextmenu avec preventDefault() lorsque l'évènement est déclenché depuis le premier paragraphe. Ainsi, rien ne se produira lorsqu'on utilisera un clic-droit sur le premier paragraphe tandis que le menu contextuel habituel s'affichera bien pour le second paragraphe.

HTML

html
<p id="noContextMenu">Le menu contextuel a été désactivé sur ce paragraphe.</p>
<p>Mais pas sur celui-ci.</p>

JavaScript

js
noContext = document.getElementById("noContextMenu");

noContext.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});

Résultat

Spécifications

Specification
UI Events
# event-type-contextmenu

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
contextmenu event
Is a PointerEvent
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Voir aussi