js实现右键弹出自定义菜单
近期在项目中有一个右键菜单的需求，发现很多实现都比较复杂，于是自己花了一点时间稍微研究了一下，下面提供一个简洁的实现方法。
js声明部分：
//创建右键菜单
varepMenu={
create:function(point,option){
varmenuNode=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(varxinoption){
vartempNode=document.createElement("a");
$(tempNode).text(option[x]['name']).on('click',option[x].action);
menuNode.appendChild(tempNode);
}
$("body").append(menuNode);
},
destory:function(){
$(".epMenu").remove();
}
};
functionsayhello(){
alert("hellokity");
epMenu.destory();
}
functionhideSysMenu(){
returnfalse;
}
css样式定义部分：
.epMenu{width:120px;background:#f0f0f0;position:fixed;left:0;top:0;box-shadow:2px2px2px2px#807878;}
.epMenua{display:block;height:25px;line-height:25px;padding-left:15px;border-top:1pxsolid#e0e0e0;border-bottom:1pxsolid#fff;font-family:微软雅黑;font-size:14px;cursor:default;}
.epMenua:hover{background:#fff;}
下面就是菜单的自定义调用部分了：
document.onmousedown=function(e){
varmenuNode=document.getElementById('epMenu');
if(e.button===2){
document.oncontextmenu=hideSysMenu;//屏蔽鼠标右键
varevt=window.event||arguments[0];
varrightedge=evt.clientX;
varbottomedge=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、注意在创建自定义菜单之前一定要屏蔽系统默认的右键菜单，非常重要！！！
最后，这个简易的右键菜单功能还有点瑕疵，右键菜单弹出后，不进行菜单项点击操作，菜单不会自动关闭，后期有空再完善吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。