Ferris教程学习笔记:js示例5.7 自定义右键菜单，请在页面点击右键查看效果。

自定义菜单事件
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>

 

posted @ 2013-12-17 11:42  kaka100  阅读(284)  评论(0)  编辑  收藏  举报