重写JS的鼠标右键点击菜单

该效果主要有三点，一是对重写的下拉菜单的隐藏和显示；二是屏蔽默认的鼠标右键事件；三是鼠标左键点击页面下拉菜单隐藏。

不多说，上html代码：

<ul id="wrapper">
    <li><a>一级</a></li>
    <li><a>二级</a></li>
    <li><a>三级</a></li>
</ul>

JavaScript代码如下：

window.onload = function(){
  var wrap = document.getElementById('wrapper');  
  wrap.style.display = 'none';  
  var li = document.getElementsByTagName('li');

  for(var i=0;i<li.length;i++){
    li.onmouseover = function(){
    this.classname = "active";
  }
  li.onmouseout = function(){
    this.classname = "";
  }  
 }   
 
 document.oncontextmenu = function(e){
   var e = event || window.event;
   wrap.style.display = "block";
   wrap.style.left = e.clientX+'px';
   wrap.style.right = e.clientY +'px';
    return false;//取消右键点击的默认事件
 }；
   document.onclick= function(){
     wrap.style.display = 'block';
  }
}

该段代码最关键的地方，就是在oncontext事件中返回false，从而达到取消默认事件的效果。