南强小屋 Design By 杰米
本文实例讲述了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调出上下文菜单的方法，希望对大家的学习有所帮助。
标签：
js调出上下文菜单,js调出菜单
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无js调出上下文菜单的实例的评论...
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？