js调出上下文菜单的实例

前端技术 2023/09/01 JavaScript

本文实例讲述了js调出上下文菜单的实例代码，分享给大家供大家参考，具体如下：

原理
　　当用户点击右键时会触发一个contextmenu事件，默认会触发浏览器的默认的上下文菜单，通过手动阻止这个默认行为，然后再显示自定义的上下文菜单，当用户单击时隐藏这个菜单即可。
代码
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在这篇文章有介绍： 《js跨浏览器的事件侦听器和事件对象的使用方法》

以上就是本文的全部内容，教大家js调出上下文菜单的方法，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/1206

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案