该效果主要有三点,一是对重写的下拉菜单的隐藏和显示;二是屏蔽默认的鼠标右键事件;三是鼠标左键点击页面下拉菜单隐藏。
不多说,上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,从而达到取消默认事件的效果。