右键菜单，顾名思义，当鼠标右键时，弹出一个菜单，而且应该是鼠标在哪点，哪出现菜单才对，最后当鼠标点击别处时，菜单消失。这个效果需要我们掌握什么知识点呢？
- ####常见事件 本例中着重用到oncontextmenu 当弹出右键菜单时发生
- ####鼠标距离左面的距离e.clientX ,而且这个值是不带单位的，如果定位的话，一定要加上字符串拼接 + “px”
- ####浏览器默认情况下，右键也会弹出菜单，所以，要知道阻止浏览器默认行为的语句 return false；
- ####e的兼容性，e= e|| window.event;
var oUl1 = document.getElementById("ul1");
document.oncontextmenu = function(){
oUl1.style.display = "block";
return false;//阻止浏览器默认行为，因为浏览器默认有一个右键显示菜单，所以要去掉
}但此时位置不对，应该是鼠标点哪，哪出现菜单，给ul绝对定位，不能是relative，因为relative空间不释放，我们必须要求他释放空间，脱离文档流才行
<script>
var oUl1 = document.getElementById("ul1");
document.oncontextmenu = function(e){
oUl1.style.display = "block";
oUl1.style.left = e.clientX +"px";
oUl1.style.top = e.clientY + "px";
return false;//阻止浏览器默认行为，因为浏览器默认有一个右键显示菜单，所以要去掉
}
</script>差点忘了e的兼容性
<script>
var oUl1 = document.getElementById("ul1");
document.oncontextmenu = function(e){
e = e || window.event;
oUl1.style.display = "block";
oUl1.style.left = e.clientX +"px";
oUl1.style.top = e.clientY + "px";
return false;//阻止浏览器默认行为，因为浏览器默认有一个右键显示菜单，所以要去掉
}此时应该考虑，当菜单栏出现后，鼠标按别的地方，菜单栏应该消失
<script>
var oUl1 = document.getElementById("ul1");
document.oncontextmenu = function(e){
e = e || window.event;
oUl1.style.display = "block";
oUl1.style.left = e.clientX +"px";
oUl1.style.top = e.clientY + "px";
return false;//阻止浏览器默认行为，因为浏览器默认有一个右键显示菜单，所以要去掉
}
document.onclick = function(){
oUl1.style.display = "none";
}
</script>到此为止，基本的右键菜单就完成了，如果你还想加点啥，譬如说，点击菜单中每个选项的时候，弹出每个选项的内容
所以用this
so.加了输出每项内容的右键菜单栏的全部代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>右键菜单</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style : none;
}
#ul1{
width: 100px;
border: 1px solid #ff0000;
border-radius:5px;
padding: 5px 0;
display: none;
position:absolute;
}
#ul1 li{
height: 24px;
line-height：24px;
text-align:center;
color:#555;
font-size:12px;
}
#ul1 li:hover{
background: #00ff00;
}
</style>
</head>
<body>
<ul id="ul1">
<li>二哈</li>
<li>金毛</li>
<li>泰迪</li>
<li>萨摩</li>
</ul>
<script>
var oUl1 = document.getElementById("ul1");
document.oncontextmenu = function(e){
e = e || window.event;
oUl1.style.display = "block";
oUl1.style.left = e.clientX +"px";
oUl1.style.top = e.clientY + "px";
return false;//阻止浏览器默认行为，因为浏览器默认有一个右键显示菜单，所以要去掉
}
document.onclick = function(){
oUl1.style.display = "none";
}
var aLi = oUl1.getElementsByTagName("li");
for(var i=0; i< aLi.length;i++){
aLi[i].onclick = function(){
console.log(this.innerHTML);
}
}
</script>
</body>
</html>