Contoh memanggil menu konteks dengan kemahiran js_javascript

Contoh dalam artikel ini menerangkan contoh kod untuk memanggil menu konteks melalui js dan berkongsi dengan anda untuk rujukan anda. Butirannya adalah seperti berikut:

Prinsip
Apabila pengguna mengklik kanan, peristiwa menu konteks akan dicetuskan Secara lalai, menu konteks lalai penyemak imbas akan dicetuskan secara manual menyekat tingkah laku lalai ini, menu konteks tersuai kemudiannya boleh disembunyikan apabila pengguna klik.
Kod
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";
 });

EventUtil yang muncul dalam kod diperkenalkan dalam artikel ini: "Cara menggunakan js pendengar acara silang pelayar dan objek acara"

Di atas adalah keseluruhan kandungan artikel ini, saya akan mengajar anda cara memaparkan menu konteks dalam js.