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
时间： 2024-08-02 02:47:39