oujood.com

Attributs d'événement HTML oncontextmenu

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.

chercher |

Attributs d'événement HTML oncontextmenu : Définition

L'attribut oncontextmenu permet de spécifier une fonction JavaScript à exécuter lorsqu'un utilisateur ouvre le menu contextuel sur l'élément donné.

Syntaxe

La syntaxe générale de l'attribut oncontextmenu est la suivante :

<element oncontextmenu="maFonction()">    

Exemples pratiques d'utilisation

Voici un exemple simple d'utilisation de l'attribut oncontextmenu sur un paragraphe :

Exemple 1 :       Copier le code

	<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.

Exemple 2 :       Copier le code

 
<!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

edge ExplorerFirefoxOperaGoogle ChromeSafari

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.

 Retour à la Liste attribut d'événement 

    
Accueil du site


Par carabde 10 mars 2014

Voir aussi nos tutoriel :

top

Définit le bord de la marge supérieure pour une boîte placée

:first-child

Ajoute un style à un élément qui est le premier enfant d'un autre élément

La méthode Json stringify

JavaScript fournit à cette fin la méthode JSON.stringify() qui convertit une valeur JavaScript en une chaîne JSON.