De nos jours, lorsque vous cliquez avec le bouton droit sur une page Web, une liste apparaîtra avec quelques options et fonctionnalités. Ce menu contextuel est également appelé menu contextuel, qui est le menu contextuel par défaut fourni par le navigateur. Les éléments de cette liste de menu varient selon les navigateurs. Certains navigateurs offrent plus de fonctionnalités, tandis que d’autres proposent des fonctionnalités limitées.
Mais voici un moyen d'ajouter un menu contextuel personnalisé ou un menu contextuel sur vos pages Web, vous pouvez ajouter autant d'options que vous le souhaitez. Mais avant de pouvoir ajouter un menu contextuel personnalisé, vous devez modifier le comportement par défaut du clic droit sur les pages Web, ce qui ouvre le menu contextuel par défaut. L'ajout d'un menu contextuel personnalisé implique les deux étapes suivantes :
Modifiez le comportement par défaut d'affichage du menu contextuel par défaut.
Ajoutez notre propre menu contextuel personnalisé et affichez-le sur la page Web avec un clic droit de la souris.
Comprenons maintenant les deux étapes ci-dessus en détail, étape par étape, à travers des exemples de code réels.
Afin d'afficher notre menu contextuel personnalisé lors d'un clic droit sur une page Web, nous devons d'abord supprimer ou masquer le menu contextuel par défaut en attribuant une fonction contenant la méthode preventDefault() à l'événement document.oncontextmenu le comportement par défaut du clic droit, qui appelle cette fonction lorsque l'utilisateur clique avec le bouton droit sur la page Web.
Discutons de l'implémentation réelle du comportement par défaut qui empêche le masquage du menu contextuel par défaut.
Étape 1 − Dans la première étape, nous allons créer un document HTML et créer une page Web pour tester notre code.
Étape 2 - Dans cette étape, nous ajouterons l'événement oncontextmenu dans le document HTML car le menu apparaîtra lors d'un clic droit sur la page Web entière.
Étape 3 - Dans la dernière étape, nous définirons une fonction JavaScript avec la méthode PreventDefault() ou renverrons l'instruction false ; pour empêcher l'apparition du menu contextuel par défaut.
L'exemple ci-dessous illustrera comment modifier le comportement par défaut du menu contextuel par défaut et le masquer−
<html>
<body>
<div style = "background-color: #84abb5; color: white; height: 150px; text-align: center;">
<h2>It is the Demo web page for testing. </h2>
</div>
<script>
document.oncontextmenu = hideRightClickMenu;
function hideRightClickMenu(event) {
event.preventDefault()
// OR
// return false;
}
</script>
</body>
</html>
Dans l'exemple ci-dessus, nous avons vu comment supprimer ou masquer la fonctionnalité du menu contextuel par défaut lors d'un clic droit sur une page en attribuant une fonction à l'aide de la méthode preventDefault().
Voyons maintenant comment ajouter un menu contextuel personnalisé et le rendre visible lors d'un clic droit sur la page.
Étape 1 - Dans la première étape, nous allons créer une liste d'éléments qui doivent être affichés dans le menu contextuel et la garder affichée : Aucun par défaut, elle ne sera visible que si vous faites un clic droit sur la page.
Étape 2 - Dans la prochaine étape, nous utiliserons l'élément