js鼠标右键菜单
效果如下：
代码如下：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <html> 3 <meta charset="utf-8" /> 4 <head> 5 <title>鼠标右键处理</title> 6 <style> 7 *{ 8 margin:0;padding:0; 9 } 10 a{ 11 text-decoration:none; 12 } 13 #oncontextmenu-content{ 14 display:none; 15 border:1px solid #aaa; 16 background:#ccc; 17 position:absolute; 18 width:100px; 19 padding:5px; 20 } 21 #oncontextmenu-content p{ 22 text-align:left; 23 height:20px; 24 border:0px solid #aaa; 25 } 26 #oncontextmenu-content p.line{ 27 border-bottom:1px solid #aaa; 28 } 29 #oncontextmenu-content p a{ 30 color:#111; 31 font:12px "宋体"; 32 line-height:20px; 33 display:block; 34 } 35 #oncontextmenu-content p a:hover{ 36 color:#eee; 37 background:#aaa; 38 } 39 .content{ 40 position:absolute; 41 } 42 #text-show{ 43 left:0px; 44 top:210px; 45 border:1px solid #111; 46 width:500px; 47 } 48 #text-hidden{ 49 left:0px; 50 top:0px; 51 opacity:0.001; 52 filter:alpha(opacity=0); 53 width:100%; 54 height:100%; 55 background:#333; 56 } 57 </style> 58 </head> 59 <body> 60 <table cellpadding="0" cellspacing="0" border="1"> 61 <tr> 62 <td id="click">请分别用 右键 合点这里测试</td> 63 </tr> 64 <tr> 65 <td>这个表格没有处理，点这里没反应</td> 66 </tr> 67 </table> 68 <div id="oncontextmenu-content"> 69 <p><a href="javascript:">aaa</a></p> 70 <p class="line"><a href="javascript:">bbb</a></p> 71 <p><a href="javascript:">ccc</a></p> 72 <p><a href="javascript:">ddd</a></p> 73 <p><a href="javascript:">eee</a></p> 74 </div> 75 <script type="text/javascript"> 76 function $(d){ 77 this.obj = document.getElementById(d); 78 return this.obj; 79 } 80 function addEvent(obj,type,fun){ 81 if(obj.addEventListener){ 82 obj.addEventListener(type,fun); 83 return true; 84 }else if(obj.attachEvent){ 85 return obj.attachEvent("on"+type, function(){ 86 fun.apply(obj,arguments); 87 }); 88 }else{ 89 return false; 90 }; 91 } 92 93 var keys = { 94 "Netscape" : { 95 left:0, //左 96 right:[2], //右 97 center:1 //中 98 }, 99 "Microsoft Internet Explorer" : { 100 left:1, //左 101 right:[0,2], //右 102 center:4, //中 103 leftAndRight:3 //左&右 104 }, 105 "Opera" : { 106 left:0, //左 107 right:[2] //右 108 } 109 }; 110 addEvent( $('click'), 'mousedown', function(e){ 111 var event = e || event; 112 var appname = navigator.appName; 113 //alert( event.button ) 114 //alert( keys[appname].right ) 115 if( keys[appname].right[0] == event.button || keys[appname].right[1] == event.button ){ 116 //alert('右键'); 117 this.oncontextmenu = function(){ return false}; 118 var contextStyle = $('oncontextmenu-content').style; 119 //alert(event.pageY +'/'+event.offsetTop+'/'+event.offsetY ) 120 var left = event.pageX || event.offsetX; 121 var top = event.pageY || event.offsetY; 122 contextStyle.display = 'block'; 123 contextStyle.left = left + 5; 124 contextStyle.top = top + 5; 125 } 126 else if( keys[appname].left == event.button ){ 127 alert('左键'); 128 } 129 }); 130 addEvent( $('oncontextmenu-content'), 'mouseover', function(e){ 131 this.style.display = 'block'; 132 }); 133 addEvent( $('oncontextmenu-content'), 'mouseout', function(e){ 134 this.style.display = 'none'; 135 }); 136 addEvent( $('oncontextmenu-content'), 'mouseup', function(e){ 137 var event = e || event; 138 var appname = navigator.appName; 139 if( keys[appname].right[0] == event.button || keys[appname].right[1] == event.button ){ 140 this.oncontextmenu = function(){ return false}; 141 return false; 142 } 143 else{ 144 alert(1) 145 } 146 }); 147 </script> 148 </body> 149 </html>
