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     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     500px;
 47 }
 48 #text-hidden{
 49     left:0px;
 50     top:0px;
 51     opacity:0.001;
 52     filter:alpha(opacity=0);
 53     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>