实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
#box{width:150px;height:120px;position:absolute;top:0px;display:none;}
li{
list-style-type:none;
width:150px;
height:40px;
background:#ddd;
border-bottom:1px dashed green;
text-align:center;
line-height:30px;
}
</style>
</head>
<body>
<div id="box">
<li>复制</li>
<li>粘贴</li>
<li>剪切</li>
<li>删除</li>
</div>
</body>
<script>
// document.onmousedown = function(e){
// //解决兼容性问题
// var e = e || event;
// //alert(e.button);
// if (e.button== 2) {
// alert('你点击了右键')
// }
// }
//菜单事件 右键事件
document.oncontextmenu=function(e){
//alert('右键事件')
var e = e || event;
document.title="X:"+e.clientX+"Y:"+e.clientY;
//让你的自定义菜单显示出来
box.style.display="block";
//让你的自定义的菜单放置在鼠标坐标点上
box.style.left = e.clientX+'px';
box.style.top = e.clientY +'px';
//阻止默认行为 阻止默认菜单出现
return false;
}
//让菜单消失的效果
document.onclick=function(){
box.style.display="none";
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
