鼠标右击事件(练习)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
padding: 0;margin: 0;list-style: none;position: absolute;background: #ccc;
}
.list{
display: none;
}
</style>
</head>
<body>
<ul id="list" class="list">
<li>red</li>
<li>green</li>
<li>blue</li>
<li>pink</li>
<li>white</li>
</ul>
<script>
function $(id){
return document.getElementById(id);
}
var list=$('list');
var lis=list.getElementsByTagName("li");
//（1）窗口右击获得菜单
document.oncontextmenu=function(ev){
list.style.display="block";
var e=ev||event;
var mx=e.clientX; //获得鼠标位置
var my=e.clientY;
list.style.left=mx+"px";
list.style.top=my+"px";
return false; //阻止右键菜单弹出
}
//（2）变色
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
document.body.style.background=this.innerHTML;
list.style.display="none";
}
}
</script>
</body>
</html>
