js实现右键自定义菜单
本文实例为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
#menu{
height:200px;
width:50px;
border:1pxsolidgray;
background-color:antiquewhite;
padding:10px;
display:none;
position:absolute;
}
ul,
li{
margin:0;
padding:0;
list-style-type:none;
line-height:40px;
}
</style>
</head>
<body>
<divid="menu">
<ul>
<li>复制</li>
<li>粘贴</li>
<li>运行</li>
<li>工具</li>
<li>帮助</li>
</ul>
</div>
</body>
<scripttype="text/javascript">
varmenu=document.getElementById("menu");
document.oncontextmenu=function(ev){
varoEvent=ev||event;
//自定义的菜单显示
menu.style.display="block";
//让自定义菜单随鼠标的箭头位置移动
menu.style.left=oEvent.clientX+"px";
menu.style.top=oEvent.clientY+"px";
//returnfalse阻止系统自带的菜单,
//returnfalse必须写在最后,否则自定义的右键菜单也不会出现
returnfalse;
}
//实现点击document,自定义菜单消失
document.onclick=function(){
menu.style.display="none";
}
</script>
</html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。