重寫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，從而達到取消默認事件的效果。