Partager un exemple simple de personnalisation du menu contextuel à l'aide de JS

Cet article présente principalement JS implémentation simple d'exemples de menus contextuels personnalisés. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour jeter un oeil

RT, un exemple simple, expliquant juste le principe

Le code est le suivant :

<p id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu>

Supposons que je voulez faire ce qui précède. Ce p est défini comme un menu contextuel et vous pouvez l'embellir à volonté.

Le principe est d'utiliser le menu contextuelévénement Lorsque vous faites un clic droit, cet événement sera déclenché. L'événementobjet peut obtenir la distance de. la souris depuis le coin supérieur gauche de la page clientX et clientY,

nous pouvons utiliser ces deux attributs pour contrôler le décalage horizontal et vertical de p, et renvoyer false pour annuler la valeur par défaut comportement de l'événement , Pour simuler le menu contextuel du navigateur.

document.oncontextmenu=function(e){

　　var x=e.clientX+'px';

　　var y=e.clientY+'px';

　　var node=document.querySelector('#menu');

　　node.style.left=x;

　　node.style.top=y;

　　node.style.width=100+'px';

　　node.style.height=100+'px';

　　return false; //很重要，不能让浏览器显示自己的右键菜单

}

C'est maintenant la partie de fermeture. La façon de fermer le menu contextuel est généralement de cliquer avec le bouton gauche dans la zone vide.

document.onclick=function(e){

　　if(e.target.id!='menu')

　　{

　　　　var node=document.querySelector('#menu');

　　　　node.style.width=0;

　　　　node.style.height=0;

　　}
}

Ceci n'est qu'une idée de base, le noyau est l'événement du menu contextuel. Sur cette base, vous pouvez utiliser CSS pour embellir et mettre à niveau à volonté, et ajouter des attributs tels que la transition pour obtenir l'effet animation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!