自定义菜单事件
oncontextmenu
return false;禁止菜单
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 4 <title>自定义右键菜单</title> 5 <style type="text/css"> 6 body,ul,li{margin:0;padding:0;} 7 body{font:12px/24px arial;} 8 #menu{position:absolute;top:-9999px;left:-9999px;width:100px;border-radius:3px;list-style-type:none;border:1px solid #8f8f8f;padding:2px;background:#fff;} 9 #menu li{position:relative;height:24px;padding-left:24px;background:#eaead7;vertical-align:top;} 10 #menu li a{display:block;color:#333;background:#fff;padding-left:5px;text-decoration:none;} 11 #menu li.active{background:#999;} 12 #menu li.active a{color:#fff;background:#8f8f8f;} 13 #menu li em{position:absolute;top:0;left:0;width:24px;height:24px;background:url(img/ico.png) no-repeat;} 14 #menu li em.cut{background-position:0 0;} 15 #menu li em.copy{background-position:0 -24;} 16 #menu li em.paste{background-position:0 -48;} 17 </style> 18 </head> 19 <body> 20 <center> 21 自定义右键菜单，请在页面点击右键查看效果。 22 </center> 23 <ul style="display:none1;top:110px;left:549px;" id="menu"> 24 <li><em class="cut"></em><a href="javascript:;">剪切</a></li> 25 <li><em class="copy"></em><a href="javascript:;">复制</a></li> 26 <li><em class="paste"></em><a href="javascript:;">粘贴</a></li> 27 </ul> 28 <script type="text/javascript"> 29 //自定义菜单事件 30 //oncontextmenu 31 //return false;禁止菜单 32 33 window.onload = function(){ 34 var oMenu = document.getElementById("menu"); 35 var aLi = oMenu.getElementsByTagName("li"); 36 37 //加载后隐藏自定义右键菜单 38 oMenu.style.display = "none"; 39 40 //菜单鼠标移入移出样式 41 for(var i=0;i<aLi.length;i++){ 42 aLi[i].onmouseover = function(){ 43 this.className = "active"; 44 }; 45 aLi[i].onmouseout = function(){ 46 this.className = ""; 47 } 48 } 49 50 //自定义菜单 51 //retrun false 很重要.. 52 document.oncontextmenu = function(event){ 53 var event = event || window.event; 54 var style = oMenu.style; 55 style.display = "block"; 56 style.top = event.clientY+"px"; 57 style.left = event.clientX+"px"; 58 return false; 59 }; 60 61 //页面点击后自定义菜单消失 62 document.onclick = function(){ 63 oMenu.style.display = "none"; 64 }; 65 66 }; 67 </script> 68 </body> 69 </html>