<!DOCTYPE HTML>
<html>
<head>
<title>js自定义右键菜单</title>
<meta charset="utf-8">
<style>
#special_menu{
position: absolute;
z-index: 100;
overflow: hidden;
display:none;
width: 150px;
border-radius:10%;
background: #ccc;
background: -webkit-linear-gradient(top,#fff,#3af);
background: -moz-linear-gradient(top,#fff,#3af);
background: -o-linear-gradient(top,#fff,#3af);
border: 1px solid #ccc;
padding: 5px;
font-size: 12px;
}
#special_menu a {
display: block;
width: 100%;
padding: 5px;
text-decoration: none;
color: #000;
}
#special_menu a:hover {
background: #777;
color: #fff;
}
</style>
</head>
<body menu='menu'>
<script>
/***
代码日期：2016-11-06，jerry，270664501@qq.com
***/
//如果鼠标左键或者中键按下菜单消失（自己除外）
document.addEventListener("mousedown",function(e){
if(e.target.parentElement.id=="special_menu"){return false;}
if(e.which==1 || e.which==2){
document.getElementById("special_menu").style.display="none";
};
},false)
//鼠标右键点击时阻止默认菜单，显示自定义菜单
document.oncontextmenu = function (e) {
e.preventDefault();
var menu = document.getElementById("special_menu");
var _Left = e.clientX;
var _Top = e.clientY;
menu.style.left = _Left.toString() + 'px';
menu.style.top = _Top.toString() + 'px';
menu.style.display = 'block';
}
</script>
<!-----设置一个菜单层---->
<div id="special_menu">
<a href='#'>返回页面顶部</a>
<a href='#'>男，浙江杭州</a>
<a href='#'>前端开发，QQ 270664501</a>
<a href='#'>正在找工作，求收留</a>
<hr>
<a href='javascript:;'>^_^ 点此查看简历 ^_^</a>
</div>
</body>
</html>
