L'attribut d'événement oncontextmenu est utilisé pour définir une action spécifique lorsqu'un utilisateur clique avec le bouton droit de la souris sur un élément HTML.
<p oncontextmenu="afficherMessage()">Cliquez avec le bouton droit ici</p>
<script>
function afficherMessage() {
alert("Menu contextuel affiché !");
}
</script>
Exemple de menu Contextuel Personnalisé
Ce code HTML et JavaScript crée une boîte contenant un menu contextuel personnalisé, qui s'affiche lorsqu'un utilisateur clique avec le bouton droit de la souris à l'intérieur de cette boîte.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de menu contextuel</title>
<style>
div {
background: yellow;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div oncontextmenu="myFunction()" contextmenu="mymenu">
<p>Cliquez avec le bouton droit de la souris à l'intérieur de cette boîte pour afficher le menu contextuel !</p>
<menu type="context" id="mymenu">
<menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
<menu label="Share on...">
<menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
<menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
</menu>
<menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>
</div>
<p><strong>Note :</strong> Le menu contextuel(contextmenu) <strong>attribut</strong> ne fonctionne que dans Firefox !</p>
<script>
function myFunction() {
alert("You right-clicked inside the div!");
}
</script>
</body>
</html>
Voici une explication ligne par ligne du code :
1. `<div oncontextmenu="afficherMenuPersonnalise()" contextmenu="menuPersonnalise">`
- Cette ligne crée une balise `<div>` qui est la zone où le menu contextuel personnalisé sera activé.
- L'attribut `oncontextmenu` spécifie la fonction JavaScript à appeler lorsque le menu contextuel est déclenché (c'est-à-dire lorsque l'utilisateur clique avec le bouton droit de la souris). Dans ce cas, la fonction `afficherMenuPersonnalise()` sera appelée.
- L'attribut `contextmenu` spécifie l'ID du menu contextuel à afficher. Dans ce cas, le menu avec l'ID "menuPersonnalise" sera utilisé.
2. `<p>Cliquez avec le bouton droit à l'intérieur de cette boîte pour voir le menu contextuel !</p>`
- Ceci crée un paragraphe affichant un message à l'utilisateur, l'invitant à cliquer avec le bouton droit de la souris à l'intérieur de la boîte pour voir le menu contextuel.
3. `<menu type="context" id="menuPersonnalise">`
- Cette ligne crée un élément de menu contextuel avec l'ID "menuPersonnalise".
- L'attribut `type="context"` indique que c'est un menu contextuel.
4. `<menuitem label="Actualiser" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>`
- Ceci crée un élément de menu avec l'étiquette "Actualiser".
- Lorsque cet élément de menu est cliqué, la page actuelle sera rechargée (`window.location.reload()`).
5. `<menu label="Partager sur...">`
- Cela crée un sous-menu avec l'étiquette "Partager sur...".
6. `<menuitem label="Twitter" icon="ico_twitter.png" onclick="partagerSurTwitter();"></menuitem>`
- Cela crée un élément de menu avec l'étiquette "Twitter" et une icône associée.
- Lorsque cet élément de menu est cliqué, la fonction `partagerSurTwitter()` sera appelée.
7. `<menuitem label="Facebook" icon="ico_facebook.png" onclick="partagerSurFacebook();"></menuitem>`
- Cela crée un élément de menu avec l'étiquette "Facebook" et une icône associée.
- Lorsque cet élément de menu est cliqué, la fonction `partagerSurFacebook()` sera appelée.
8. `</menu>`
- Ferme le sous-menu "Partager sur...".
9. `<menuitem label="Envoyer cette page par e-mail" onclick="envoyerParEmail();"></menuitem>`
- Cela crée un autre élément de menu avec l'étiquette "Envoyer cette page par e-mail".
- Lorsque cet élément de menu est cliqué, la fonction `envoyerParEmail()` sera appelée.
10. `</menu>`
- Ferme le menu principal "menuPersonnalise".
11. `<p><strong>Remarque :</strong> L'attribut contextmenu fonctionne dans Firefox, et l'attribut oncontextmenu est une solution plus générale pour une prise en charge multi-navigateurs.</p>`
- Un paragraphe qui explique une note importante sur la compatibilité des navigateurs concernant les attributs `contextmenu` et `oncontextmenu`.
12. `function afficherMenuPersonnalise() { // ... }`
- Définition de la fonction JavaScript `afficherMenuPersonnalise()`. Cette fonction peut contenir des actions supplémentaires à effectuer avant d'afficher le menu personnalisé.
13. `function partagerSurTwitter() { // ... }`
- Définition de la fonction JavaScript `partagerSurTwitter()`, qui ouvre une nouvelle fenêtre pour partager la page actuelle sur Twitter.
14. `function partagerSurFacebook() { // ... }`
- Définition de la fonction JavaScript `partagerSurFacebook()`, qui ouvre une nouvelle fenêtre pour partager la page actuelle sur Facebook.
15. `function envoyerParEmail() { // ... }`
- Définition de la fonction JavaScript `envoyerParEmail()`, qui redirige l'utilisateur vers son client de messagerie avec le lien de la page actuelle dans le corps du courriel.
Appui des navigateurs
L'attribut oncontextmenu est largement pris en charge par les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge.
Astuces et conseils d'utilisation
Veillez à ce que l'action déclenchée par le menu contextuel soit pertinente pour l'élément sur lequel elle est appliquée.
Évitez d'utiliser des actions intrusives qui pourraient perturber l'expérience utilisateur.