<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 100px;
display: none;
position: fixed;
left: 0;
top: 0;
border: 1px solid black;
border-bottom: 0;
}
li {
list-style: none;
border-bottom: 1px solid black;
cursor: pointer;
}
</style>
<ul>
<li>新建</li>
<li>剪切</li>
<li>复制</li>
<li>粘贴</li>
</ul>
<script>
var oMenu = document.querySelector('ul')
document.oncontextmenu = function (e) {
var ev = event || e;
ev.preventDefault();
var x = ev.x, y = ev.y;
oMenu.style.cssText = `display:block;left:${x}px;top:${y}px`;
}
document.onclick = function (e) {
var ev = event || e;
var target = ev.target || ev.srcElement;
if (target.tagName == 'LI') {
console.log(target.innerHTML);
}
oMenu.style.display = 'none';
}
</script>