Beispiel für den Aufruf eines Kontextmenüs mit js_javascript-Kenntnissen

Das Beispiel in diesem Artikel beschreibt den Beispielcode zum Aufrufen des Kontextmenüs über js und teilt ihn als Referenz mit Ihnen. Die Details lauten wie folgt:

Prinzip
Wenn der Benutzer mit der rechten Maustaste klickt, wird standardmäßig das Standardkontextmenü des Browsers ausgelöst. Durch manuelles Blockieren dieses Standardverhaltens kann dieses Menü ausgeblendet werden Klicks.
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";
 });

Das im Code angezeigte EventUtil wird in diesem Artikel vorgestellt: "So verwenden Sie js browserübergreifende Ereignis-Listener und Ereignisobjekte"

Das Obige ist der gesamte Inhalt dieses Artikels. Ich werde Ihnen zeigen, wie Sie das Kontextmenü in js aufrufen. Ich hoffe, dass es Ihnen beim Lernen hilfreich sein wird.