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.

En savoir plus
Voir la compatibilité complète

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.

Propriétés de l'évènement

Cette interface hérite des propriétés de MouseEvent et Event.

PointerEvent.altitudeAngle Lecture seule: Représente l'angle entre l'axe d'un transducteur (un pointeur ou un stylet) et le plan X-Y de l'écran de l'appareil.
PointerEvent.azimuthAngle Lecture seule: Représente l'angle entre le plan Y-Z et le plan contenant à la fois l'axe du transducteur (un pointeur ou un stylet) et l'axe Y.
PointerEvent.pointerId Lecture seule: Un identifiant unique pour le pointeur à l'origine de l'évènement.
PointerEvent.width Lecture seule: La largeur (magnitude sur l'axe X), en pixels CSS, de la géométrie de contact du pointeur.
PointerEvent.height Lecture seule: La hauteur (magnitude sur l'axe Y), en pixels CSS, de la géométrie de contact du pointeur.
PointerEvent.pressure Lecture seule: La pression normalisée de l'entrée du pointeur dans la plage 0 à 1, où 0 et 1 représentent respectivement la pression minimale et maximale que le matériel est capable de détecter.
PointerEvent.tangentialPressure Lecture seule: La pression tangentielle normalisée de l'entrée du pointeur (également connue sous le nom de pression de la bague ou contrainte du cylindre ^(angl.)) dans la plage -1 à 1, où 0 est la position neutre du contrôle.
PointerEvent.tiltX Lecture seule: L'angle plan (en degrés, dans la plage de -90 à 90) entre le plan Y-Z et le plan contenant à la fois l'axe du pointeur (par exemple, le stylet) et l'axe Y.
PointerEvent.tiltY Lecture seule: L'angle du plan (en degrés, dans la plage de -90 à 90) entre le plan X-Z et le plan contenant à la fois l'axe du pointeur (par exemple, le stylet) et l'axe X.
PointerEvent.twist Lecture seule: Rotation dans le sens des aiguilles d'une montre du pointeur (par exemple, un stylet) autour de son axe principal, exprimée en degrés, avec une valeur comprise entre 0 et 359.
PointerEvent.pointerType Lecture seule: Indique le type de périphérique à l'origine de l'évènement (souris, stylet, écran tactile, etc.).
PointerEvent.isPrimary Lecture seule: Indique si le pointeur est le pointeur principal de ce type de pointeur.

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

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

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 30 juil. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu