Element : évènement contextmenu
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
L'évènement contextmenu se déclenche lorsque l'utilisateur·ice tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché en cliquant sur le bouton droit de la souris ou en appuyant sur la touche du menu contextuel.
Dans ce dernier cas, le menu contextuel s'affiche en bas à gauche de l'élément sélectionné, sauf si l'élément est un arbre, auquel cas le menu contextuel s'affiche en bas à gauche de la ligne courante.
Tout clic droit qui n'est pas désactivé (en appelant la méthode preventDefault() de l'évènement click) déclenche un évènement contextmenu sur l'élément ciblé.
Note :
Une exception à cela dans Firefox : si l'utilisateur·ice maintient la touche Shift en cliquant avec le bouton droit, le menu contextuel s'affiche sans qu'un évènement contextmenu ne soit déclenché.
Syntaxe
Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.
addEventListener("contextmenu", (event) => { })
oncontextmenu = (event) => { }
Type d'évènement
Un objet PointerEvent. Hérite de MouseEvent.
Note :
Dans les premières versions de la spécification, le type d'évènement pour cet évènement était un MouseEvent. Consultez la compatibilité des navigateurs pour plus d'informations.
Exemples
Annuler l'évènement contextmenu
Dans cet exemple, l'action par défaut de l'évènement contextmenu est annulée à l'aide de preventDefault() lorsque cet évènement est déclenché sur le premier paragraphe. Par conséquent, un clic droit sur le premier paragraphe n'a aucun effet, tandis que le deuxième paragraphe affiche le menu contextuel standard proposé par votre navigateur.
Note :
Dans Firefox, si vous maintenez la touche Maj enfoncée tout en cliquant avec le bouton droit, le menu contextuel s'affiche sans que l'évènement contextmenu ne soit déclenché. Par conséquent, l'annulation de l'évènement n'empêche pas l'affichage du menu contextuel.
HTML
<p id="pasDeMenuContextuel">
Le menu contextuel a été désactivé sur ce paragraphe.
</p>
<p>Mais il n'a pas été désactivé sur celui-ci.</p>
JavaScript
const sansContexte = document.getElementById("pasDeMenuContextuel");
sansContexte.addEventListener("contextmenu", (e) => {
e.preventDefault();
});
Résultat
Spécifications
| Spécification |
|---|
| Pointer Events # contextmenu |
Compatibilité des navigateurs
Voir aussi
- Apprendre : Introduction aux évènements
- L'évènement
auxclick - L'évènement
click - L'évènement
dblclick - L'évènement
mousedown - L'évènement
mouseup - L'évènement
pointerdown - L'évènement
pointerup