當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

简单的自定义鼠标右键菜单

發(fā)布時間：2024/5/24 综合教程 40 生活家

生活随笔收集整理的這篇文章主要介紹了简单的自定义鼠标右键菜单小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Window95 在PC中引入上下文菜單的概念，即通過鼠標(biāo)右鍵調(diào)出上下文菜單，不久之后這個概念也被引入web中。

接下來我們來學(xué)習(xí)一下如何js自定義鼠標(biāo)右鍵的菜單。 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";  //設(shè)置位置
 88                menu.style.top = event.clientY + "px";
 89                menu.style.visibility = "Visible";       //設(shè)置屬性，使其可見
 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上所有自定義上下文菜單的基本結(jié)構(gòu)。只需為這個例子中支持的上下文菜單添加一些css樣式，就可以達到非常棒的效果。

轉(zhuǎn)載請說明出處：http://www.cnblogs.com/kerita

總結(jié)

以上是生活随笔為你收集整理的简单的自定义鼠标右键菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。