html
<div id="menu">
<a href="javascript:;">a</a>
<a href="javascript:;">b</a>
<a href="javascript:;">c</a>
<a href="javascript:;">d</a>
</div>
css
#menu{
background-color: #fff;
width: 300px;
box-shadow: 0 1px 20px #eeeeee,1px 0 20px #eeeeee;
position: absolute;
z-index: 99999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#menu a{
display: block;
height: 40px;
line-height: 40px;
padding: 0 20px;
text-decoration:none;
font-size: 14px;
color: #4c4c4c;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#menu a:hover{
background-color:#eeeeee;
}
js
window.oncontextmenu = function (e) {
var e = event || window.event;
//取消默认浏览器自带右键
e.preventDefault();
//获取自定义右键菜单
let menu = document.getElementById('menu');
//根据事件对象中鼠标点击的位置,进行定位
menu.style.left = e.clientX + 'px';
menu.style.top = e.pageY + 'px';
//改变自定义菜单宽度。让其显示
menu.style.display = 'block';
}
//close右键菜单
window.onclick = function (e) {
//触发click事件即可关闭
document.getElementById('menu').style.display = "none";
}