<style>
#menu {
width: 200px;
height: 200px;
box-shadow: 3px 3px rgba(0, 0, 0, .2);
display: none;
position: absolute;
}
li {
list-style-type: none;
padding-left: 40px;
height: 30px;
line-height: 30px;
font-size: 12px;
}
ul {
display: flex;
height: 200px;
flex-direction: column;
justify-content: space-evenly;
border: 1px solid #ccc;
padding: 0;
margin: 0;
}
li:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>复制</li>
<li>粘贴</li>
<li>剪切</li>
<li>全选</li>
<li>撤回</li>
</ul>
</div>
<script>
/* 获取菜单元素节点 */
var menu = document.getElementById('menu');
/* 绑定右键菜单 */
document.oncontextmenu = function(e) {
/* 显示菜单 */
menu.style.display = 'block';
/* 阻止默认行为 */
// return false;
e.preventDefault();
/* 让菜单的位置和鼠标的位置一致 */
menu.style.left = e.pageX + 'px'
menu.style.top = e.pageY + 'px'
}
/* 鼠标点击后隐藏 */
document.onclick = function() {
menu.style.display = 'none'
}
</script>
</body>