转载 – 葫芦七娃 –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标右键事件</title>
<style>
*{margin:0px;padding:0px;list-style:none;}
#uls{
width:130px;
height:auto;
border:solid 1px #333;
display:none;
position:absolute;
}
#uls a{
text-decoration:none;
line-height:30px;
text-align:center;
display:block;
}
#uls li{
width:130px;
height:30px;
border:solid 1px #eee;
}
</style>
</head>
<body>
<ul id='uls'>
<li><a href="">军事</a></li>
<li><a href="">科技</a></li>
<li><a href="">美女</a></li>
<li><a href="">生活</a></li>
<li><a href="">体育</a></li>
</ul>
<div id="divId" style="width: 100px;height: 100px;background: #333333;"></div>
<script>
var uls = document.getElementById('uls');
var lis = document.getElementsByTagName('li');
// window 可以是定义某个div范围内触发
/* window.oncontextmenu = function(e) */
document.getElementById("divId").oncontextmenu = function(e)
{
//获取x和y坐标
var x = e.clientX;
var y = e.clientY;
// console.log(x,y);
uls.style.left = x+'px';
uls.style.top = y+'px';
uls.style.display = 'block';
return false;
}
for (var i = 0; i < lis.length; i++) {
//鼠标移上去
lis[i].onmouseover = function(){
this.style.background='#ddd';
var as = this.children;
for (var i = 0; i < as.length; i++) {
as[i].style.color = 'red';
}
}
//鼠标移出来
lis[i].onmouseout = function(){
this.style.background=null;
var as = this.children;
for (var i = 0; i < as.length; i++) {
as[i].style.color = '';
}
}
}
window.onclick = function(){
uls.style.display = 'none';
}
</script>
</body>
</html>