简单的自定义鼠标右键菜单
生活随笔
收集整理的這篇文章主要介紹了
简单的自定义鼠标右键菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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">
13 <li><a target="_blank">Nicholas' site</a></li>
14 <li><a target="_blank">Wrox site</a></li>
15 <li><a 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
總結
以上是生活随笔為你收集整理的简单的自定义鼠标右键菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 哈雷保持器可以微调牙齿吗
- 下一篇： 电脑文件如何加密电脑文档如何加密