简单的自定义鼠标右键菜单

Window95 在PC中引入上下文菜单的概念，即通过鼠标右键调出上下文菜单，不久之后这个概念也被引入web中。

接下来我们来学习一下如何js自定义鼠标右键的菜单。 1 <!DOCTYPE html>

  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>contextmenu</title>
  6 </head>
  7 <body>
  8 //定义一个div，此处为操作方法的解释
  9   <div id="myDiv">Right click or ctrl + right me to get a custom context menu.
 10   Click anywhere to get the default context menu.</div>
 11 //此处是菜单，但是已通过css样式中的visibility隐藏
 12   <ul id="myMenu" style="position:absolute; visibility:hidden; background-color:silver; list-style:none;">
 13       <li><a href="http://www.nczline.net" target="_blank">Nicholas' site</a></li>
 14       <li><a href="http://www.wrox.com" target="_blank">Wrox site</a></li>
 15       <li><a href="http://www.yahoo.com" target="_blank">Yahoo!</a></li>
 16   </ul>
 17    <script>
 18 //通过这个类来兼容各种浏览器
 19         var EventUtil = {
 20             addHandler: function (element, type, handler) {
 21                 if (element.addEventListener) {
 22                     element.addEventListener(type, handler, false);
 23                 } else if (element.attachEvent) {
 24                     element.attachEvent("on" + type, handler);
 25                 } else {
 26                     element["on" + type] = handler;
 27                 }
 28             },
 29             getEvent: function (event) {
 30                 return event ? event : window.event;
 31             },
 32             getTarget: function (event) {
 33                 return event.target || event.srcElement;
 34             },
 35 
 36             removeEventListener: function (element, type, handler) {
 37                 if (element.removeEventListener) {
 38                     element.removeEventListener(type, handler, false);
 39                 } else if (element.detachEvent) {
 40                     element.detachEvent("on" + type, handler);
 41                 } else {
 42                     element["on" + type] = null;
 43                 }
 44             },
 45             stopPropagation: function (event) {
 46                 if (event.stopPropagation) {
 47                     event.stopPropagation();
 48                 } else {
 49                     event.cancelBubble = true;
 50                 }
 51             },
 52 
 53             preventDefault: function (event) {
 54                 if (event.preventDefault) {
 55                     event.preventDefault();
 56                 } else {
 57                     event.returnValue = false;
 58                 }
 59 
 60             },
 61             getRelatedTarget: function (event) {
 62                 if (event.relatedTarget) {
 63                     return event.relatedTarget;
 64                 } else if (event.toElement) {
 65                     return event.toElement;
 66                 } else if (event.fromElement) {
 67                     return event.fromElement;
 68                 } else {
 69                     return null;
 70                 }
 71 
 72             }
 73      
 74         };
 75     //为整个窗口添加onload事件
 76        EventUtil.addHandler(window,"load",function(event){
 77         var div = document.getElementById("myDiv");
 78          // 为div添加oncontextmenu事件
 79            EventUtil.addHandler(div,"contextmenu",function(event){
 80             //通过EventUtil获取事件
 81             event = EventUtil.getEvent(event);
 82               //传入事件event，禁止默认动作，即不显示浏览器默认的上下文菜单
 83                EventUtil.preventDefault(event);
 84                
 85                 //获取菜单   
 86                var menu = document.getElementById("myMenu");

 87                menu.style.left = event.clientX + "px";  //设置位置
 88                menu.style.top = event.clientY + "px";
 89                menu.style.visibility = "Visible";       //设置属性，使其可见
 90              
 91            });
 92            // 为窗口添加一个单击事件，使得单击之后上下文菜单消失
 93            EventUtil.addHandler(document,"click",function(event){
 94             document.getElementById("myMenu").style.visibility="hidden";   
 95                
 96            });
 97            
 98        });
 99        
100    </script>
101     
102 </body>
103 </html>

虽然这个例子很简单，但它展示了web上所有自定义上下文菜单的基本结构。只需为这个例子中支持的上下文菜单添加一些css样式，就可以达到非常棒的效果。

转载请说明出处：http://www.cnblogs.com/kerita