js实现右键弹出自定义菜单

js实现右键弹出⾃定义菜单
近期在项⽬中有⼀个右键菜单的需求，发现很多实现都⽐较复杂，于是⾃⼰花了⼀点时间稍微研究了⼀下，下⾯提供⼀个简洁的实现⽅法。

js声明部分：
//创建右键菜单
var epMenu={
create:function(point,option){
var menuNode=document.getElementById('epMenu');
if(!menuNode){
//没有菜单节点的时候创建⼀个
menuNode=document.createElement("div");
menuNode.setAttribute('class','epMenu');
menuNode.setAttribute('id','epMenu');
}else $(menuNode).html('');//清空⾥⾯的内容
$(menuNode).css({left:point.left+'px',top:point.top+'px'});
for(var x in option){
var tempNode=document.createElement("a");
$(tempNode).text(option[x]['name']).on('click',option[x].action);
menuNode.appendChild(tempNode);
}
$("body").append(menuNode);
},
destory:function(){
$(".epMenu").remove();
}
};
function sayhello(){
alert("hellokity");
epMenu.destory();
}
function hideSysMenu() {
return false;
}
css样式定义部分：
.epMenu{ width:120px; background:#f0f0f0; position:fixed; left:0; top:0; box-shadow:2px 2px 2px 2px #807878;}
.epMenu a{ display:block; height:25px; line-height:25px; padding-left:15px; border-top:1px solid #e0e0e0; border-bottom:1px solid #fff; font-family:微软雅⿊; font-size:14px; cursor:default;} .epMenu a:hover{ background:#fff;}
下⾯就是菜单的⾃定义调⽤部分了：
document.onmousedown = function(e){
var menuNode=document.getElementById('epMenu');
if(e.button===2){
document.oncontextmenu = hideSysMenu;//屏蔽⿏标右键
var evt = window.event || arguments[0];
var rightedge = evt.clientX;
var bottomedge = evt.clientY;
epMenu.create({left:rightedge,top:bottomedge},[{name:'a1','action':sayhello},{name:'b2','action':sayhello},{name:'c3','action':sayhello},{name:'c4','action':sayhello}]);
}
// epMenu.destory();
}
简单解析⼀下：
1、epMenu.create⽅法的第⼀个参数是菜单弹出的位置坐标（距离屏幕左上⾓），这⾥⽤的是⿏标点击的坐标，菜单跟随⿏标点击弹出；第⼆个参数是⼀个json格式的数据，⽤于⾃定义菜单项，name是菜单项名字，action是点击菜单项后的动作（可以是函数，ajax请求等）。

2、e.button的值：2表⽰点击右键，0表⽰点击左键，4表⽰点击中键（ie），各浏览器的button值不同，此处仅以ie11作为参考。

3、注意在创建⾃定义菜单之前⼀定要屏蔽系统默认的右键菜单，⾮常重要
最后，这个简易的右键菜单功能还有点瑕疵，右键菜单弹出后，不进⾏菜单项点击操作，菜单不会⾃动关闭，后期有空再完善吧。

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。