最近学习学到一个小东西觉得很有用，分享一下，以前做cs系统右键菜单很常用，同样前端网页也是。
Windows95在PC中引入了上下文菜单的概念，即通过单击鼠标右键可以调出上下文菜单。不久，这个概念也被引入了Web领域。为了实现上下文菜单，开发人员面临的主要问题是如何确定应该显示上下文菜单（在Windows中，是右键单击；在Mac中，是Ctrl+单击），以及如何屏蔽与该操作关联的默认上下文菜单。为解决这个问题，就出现了contextmenu这个事件，用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。
由于contextmenu事件是冒泡的，因此可以为document指定一个事件处理程序，用于处理页面中发生的所有此类事件。这个事件的目标是发生用户操作的元素。在所有浏览器中可以取消这个事件：在兼容DOM的浏览器中，使用event.preventDefalut()；在IE，将event.returnValue的值设置为false。因为contextmenu事件属于鼠标事件，所以其事件对象中包含与光标位置有关的所有属性。通常使用contextmenu事件来显示自定义的上下文菜单，而使用onclick事件处理程序隐藏该菜单。以下面的HTML页面为例：
<html><head>
<title></title> <script type="text/javascript"> function init() { var div = document.getElementById("myDiv"); div.oncontextmenu = function(event) { //屏蔽掉浏览器本身的右键菜单
//如果存在方法event.preventDefault()，直接调用就行
event.returnValue = false; //设置右键菜单的位置以及显示出来 var menu = document.getElementById("myMenu"); menu.style.left = event.clientX + "px"; menu.style.top = event.clientY + "px"; menu.style.visibility = "visible"; } document.onclick = function(event) { //当左键点击的时候隐藏右键菜单 document.getElementById("myMenu").style.visibility = "hidden"; } } </script> </head> <body onload="init()"> <div id="myDiv">右键单击测试上下文本框</div> <ul id="myMenu" style="position: absolute;visibility: hidden;background-color: silver"> <li><a href="http://www.cnblogs.com/zhuimengdeyuanyuan/archive/2013/02/05/2892988.html">精通正则表达式（元字符）</a></li> <li><a href="http://www.cnblogs.com/zhuimengdeyuanyuan/archive/2013/02/06/2893240.html">精通正则表达式（正则引擎）</a></li> <li><a href="http://www.cnblogs.com/zhuimengdeyuanyuan/archive/2013/02/06/2893420.html">精通正则表达式（JavaScript）</a></li> </ul> </body> </html>
这里的<div>元素包含一个自定义的上下文菜单。其中，<ul>元素作为自定义上下菜单，并且在初始时是隐藏的。
在这个例子中，我为<div>元素添加了oncontextmenu事件的处理程序。这个事件处理程序首先会取消默认行为，以保证不显示浏览器默认的上下文菜单。然后，再根据event对象clientX和clientY属性的值，来确定放置<ul>元素的位置。最后一步就是通过将visibility属性设置为“visible”来显示自定义上下文菜单。另外，还为document添加了一个onclick事件处理程序，以便用户能够通过鼠标单击来隐藏菜单（单击也是隐藏系统上下文菜单的默认操作）
效果如下：
虽然这个例子简单，但它却展示了Web上所有自定义上下文菜单的基本结构。只需为这个例子中的上下文菜单添加一些CSS样式，就可以得到非常棒的效果。
由于contextmenu事件非常流行，而且所有浏览器支持它，所以HTML5也加入了该事件，放心的用吧！