html代码
<body oncontextmenu="showMenu(event)">
<div class="contextmenu" id="context">
<ul>
<li><a href="javascript:toDetail_();">详情</a></li>
<li><a href="javascript:toTelecontrol_();">操作</a> </li>
<li><a href="javascript:;">剪切</a></li>
<li><a href="javascript:;">下载</a></li>
<li><a href="javascript:;">上传</a></li>
</ul>
</div>
</body>
css代码
ul {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
.contextmenu {
width: 200px;
border: 1px solid #999;
box-shadow: 3px 3px 3px #ccc;
background-color: #fff;
position: absolute;
top: 10px;
left: 10px;
display: none;
z-index:9999999
}
.contextmenu li {
height: 40px;
line-height: 40px;
}
.contextmenu li a {
display: block;
padding: 0 30px;
}
.contextmenu li a:hover {
background-color: #ccc;
font-weight: bold;
color: #fff;
}
js代码
function showMenu(env){
env.preventDefault();
//env 表示event事件
// 兼容event事件写法
var e = env || window.event;
// 获取菜单，让菜单显示出来
var context = document.getElementById("context");
context.style.display = "block";
// 让菜单随着鼠标的移动而移动
// 获取鼠标的坐标
var x = e.clientX;
var y = e.clientY;
// 调整宽度和高度
context.style.left =x-200+"px" //Math.min(w-202,x)+"px";
context.style.top = y+"px" //Math.min(h-230,y)+"px";
// return false可以关闭系统默认菜单
return false;
};
// 当鼠标点击后关闭右键菜单
document.onclick = function(){
closeMenu()
};
function closeMenu(){
var contextmenu = document.getElementById("context");
contextmenu.style.display = "none";
}
