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