<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 100px;
background: #ccc;
border:1px solid #000;
position: absolute;
display: none;
list-style: inside;
}
li {
}
</style>
</head>
<body>
<ul id="ul1">
<li>登陆</li>
<li>注销</li>
<li>回到首页</li>
<li>加入</li>
</ul>
<script>
document.oncontextmenu = function (ev){
var oEvent = ev || event;
var oUl = document.getElementById("ul1");
var scrollTop = document.documentElement.scrollTop ||
document.body.scrollTop;
oUl.style.display = "block";
oUl.style.left = oEvent.clientX + 'px';
oUl.style.top = scrollTop + oEvent.clientY + 'px';
return false;
}
document.onclick = function (){
var oUl = document.getElementById("ul1");
oUl.style.display = "none";
}
</script>
</body>
</html>