Exemple d'appel de menu contextuel avec les compétences js_javascript

L'exemple de cet article décrit l'exemple de code d'appel du menu contextuel via js et le partage avec vous pour votre référence. Les détails sont les suivants :

Principe
Lorsque l'utilisateur clique avec le bouton droit, un événement de menu contextuel sera déclenché. Par défaut, le menu contextuel par défaut du navigateur sera déclenché. En bloquant manuellement ce comportement par défaut, le menu contextuel personnalisé sera alors affiché. clics.
Code
1.html

<div id="box" style="color:red;width: 100%;height:1000px;" >
 <div id="left" style="float:left;width:500px;margin-left: 50px;height:500px;background: #cdeddf;">

 </div>
 <div id="right" style="float:right;width:600px;margin-right: 50px;height:500px;background: #cdeaae;">
 </div>
 <ul id="menu" style="position: absolute;visibility: hidden;list-style: none;">
  <li>按钮1</li>
  <li>按钮2</li>
  <li>按钮3</li>
 </ul>
</div>

2.js

// 添加contextmenu事件
 var right = document.getElementById("right");
 EventUtil.addEventListener(right, "contextmenu", function(event) {
 event = EventUtil.getEvent(event);
 EventUtil.preventDefault(event);
 var menu = document.getElementById("menu");

 // 获取鼠标右击时的坐标，并设置上下文菜单出现位置
 page = EventUtil.getPagePosition(event);
 menu.style.left = page.pageX + "px";
 menu.style.top = page.pageY + "px";
 menu.style.visibility = "visible";
 });

 // 添加隐藏上下文菜单事件
 EventUtil.addEventListener(document, "click", function(event) {
 var menu = document.getElementById("menu");
 menu.style.visibility = "hidden";
 });

L'EventUtil qui apparaît dans le code est présenté dans cet article : "Comment utiliser les écouteurs d'événements et les objets d'événement multi-navigateurs js"

Ce qui précède représente l'intégralité du contenu de cet article. Je vais vous apprendre à afficher le menu contextuel en js. J'espère que cela vous sera utile pour votre apprentissage.