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

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" style="position:absolute; visibility:hidden; background-color:silver; list-style:none;">

 13       <li><a href="http://www.nczline.net" target="_blank">Nicholas' site</a></li>  14  <li><a href="http://www.wrox.com" target="_blank">Wrox site</a></li>  15  <li><a href="http://www.yahoo.com" 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

你可能感兴趣的:(右键菜单)