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

综合教程

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

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

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

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

接下來(lái)我們來(lái)學(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 //定義一個(gè)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 //通過這個(gè)類來(lái)兼容各種瀏覽器
 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     //為整個(gè)窗口添加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，禁止默認(rèn)動(dòng)作，即不顯示瀏覽器默認(rèn)的上下文菜單
 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            // 為窗口添加一個(gè)單擊事件，使得單擊之后上下文菜單消失
 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>

雖然這個(gè)例子很簡(jiǎn)單，但它展示了web上所有自定義上下文菜單的基本結(jié)構(gòu)。只需為這個(gè)例子中支持的上下文菜單添加一些css樣式，就可以達(dá)到非常棒的效果。

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

總結(jié)

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

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