HTML5事件-自定義右鍵菜單

本文轉載自查看原文 2014-04-24 00:11 3112 js組件化開發

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 })

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaScript 自定義html元素鼠標右鍵菜單 html鼠標自定義右鍵菜單：css+js實現自定義html右鍵菜單鼠標點擊事件（屏蔽右鍵菜單，彈出自定義菜單）自定義右鍵新建菜單 CSS自定義右鍵菜單 angularjs 自定義右鍵菜單自定義網頁右鍵菜單總結 Qt之自定義QLineEdit右鍵菜單 JavaScript實現自定義右鍵菜單 vue中自定義右鍵菜單