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

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

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

不多说，上html代码：

1 <ul id="wrapper">
2     <li><a>一级</a></li>
3     <li><a>二级</a></li>
4     <li><a>三级</a></li>
5 </ul>

JavaScript代码如下：

 1 window.onload = function(){
 2   var wrap = document.getElementById('wrapper');
 3   wrap.style.display = 'none';
 4   var li = document.getElementsByTagName('li');
 5
 6   for(var i=0;i<li.length;i++){
 7     li.onmouseover = function(){
 8     this.classname = "active";
 9   }
10   li.onmouseout = function(){
11     this.classname = "";
12   }
13  }
14
15  document.oncontextmenu = function(e){
16    var e = event || window.event;
17    wrap.style.display = "block";
18    wrap.style.left = e.clientX+'px';
19    wrap.style.right = e.clientY +'px';
20     return false;//取消右键点击的默认事件
21  }；
22    document.onclick= function(){
23      wrap.style.display = 'block';
24   }
25 }

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