HTML5事件-自定义右键菜单

WEB领域中，为实现上下文菜单，开发人员面临的主要问题是如何确定应该显示这个上下文菜单（Windows 中，右键单击；Mac 中，Ctrl+单击），

以及如何屏蔽与该操作相关联的默认上下文菜单。

解决方案：

contextmenu事件，用以表示何时应该显示上下文菜单，以便取消默认的上下文菜单而提供自定义的菜单。

contextmenu事件支持冒泡，可以通过为document指定一个事件处理程序，用以处理页面上所有此类事件。

html代码

 1 <!DOCTYPE html>
 2 <html>
 3     <title></title> 
 4     <body>
 5         <div id="myDiv">
 6                Right click or Ctrl+click me to get a custom context menu.
 7                Click anywhere esle to get the default context menu.
 8         </div>
 9          <ul id="myMenu" style="postion: absolute; visibility: hidden; background: silver;">
10              <li>
11                    <a href="http://www.baidu.com">baidu</a>
12                    <a href="http://www.huawei.com">huawei</a>
13                    <a href="http://www.cnblogs.com">cnblogs</a>
14              </li>
15          </ul>
16     <body>
17 </html>

js代码

 1 var EventUtil = {
 2 
 3            addHandler:   function(element, type, handler){
 4                     if(element.addEventListener){
 5                         element.addEventListener(type, handler, false);   
 6                     }else if(element.attachEvent){
 7                         element.attachEvent("on" + type, handler);
 8                     }else{
 9                         element["on" + type] = handler;
10                     }                    
11             },
12 
13            getEvent: function(event){
14                   return event?event: window.event; 
15            },     
16 
17             getTarget: function(event){
18                   return event.target|| event.srcElement; 
19            },     
20 
21            preventDefault: function(event){
22                    if(event.preventDefault){
23                        event.preventDefault(); 
24                    }else{
25                        event.returnValue = false;
26                    }
27            },
28 
29            removeHandler: function(event){
30                   if(element.removeEventListener){
31                          element.removeEventListener(type, handler, false);
32                   }
33                   else if(element.detachEvent)
34                   {
35                      element.detachEvent("on" + type, handler);
36                   }else{
37                      element["on" + type] = null;
38                   }
39            },
40 
41            stopPropagation: function(event){
42                    if(event.stopPropagation){
43                        event.stopPropagation();
44                    }else{                    
45                        event.cancelBubble = true;         
46                    }
47            },
48            
49            getCharCode: function(event){
50                 if(typeof event.charCode == "number"){
51                      return event.charCode;
52                 }else{
53                      return event.keyCode;
54                 }
55            }
56 }

 1 EventUtil.addHandler(window, "load", function(event){
 2 
 3      var div = document.getElementById("myDiv");
 4 
 5      EventUtil.addHandler(div, "contexmenu", function(event){
 6             event = EventUtil.getEvent(event);        
 7             EventUtil.preventDefault(event); 
 8             
 9             var menu = document.getElementById("myMenu");
10             menu.style.left = event.clientX + "px";          
11             menu.style.top = event.clientY + "px";
12             menu.style.visibility = "visible"; 
13     });
14 
15     EventUtil.addHandler(document, "click", function(event){
16              document.getElementById("myMenu").style.visibility = "hidden";
17     });
18 })

HTML5事件-自定义右键菜单

推荐阅读