js调出上下文菜单的实例
本文实例讲述了js调出上下文菜单的实例代码，分享给大家供大家参考，具体如下：
原理
当用户点击右键时会触发一个contextmenu事件，默认会触发浏览器的默认的上下文菜单，通过手动阻止这个默认行为，然后再显示自定义的上下文菜单，当用户单击时隐藏这个菜单即可。
代码
1、html
<divid="box"style="color:red;width:100%;height:1000px;"> <divid="left"style="float:left;width:500px;margin-left:50px;height:500px;background:#cdeddf;"> </div> <divid="right"style="float:right;width:600px;margin-right:50px;height:500px;background:#cdeaae;"> </div> <ulid="menu"style="position:absolute;visibility:hidden;list-style:none;"> <li>按钮1</li> <li>按钮2</li> <li>按钮3</li> </ul> </div>
2、js
//添加contextmenu事件
varright=document.getElementById("right");
EventUtil.addEventListener(right,"contextmenu",function(event){
event=EventUtil.getEvent(event);
EventUtil.preventDefault(event);
varmenu=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){
varmenu=document.getElementById("menu");
menu.style.visibility="hidden";
});
代码出现的EventUtil在这篇文章有介绍：《js跨浏览器的事件侦听器和事件对象的使用方法》
以上就是本文的全部内容，教大家js调出上下文菜单的方法，希望对大家的学习有所帮助。