最近學習學到一個小東西覺得很有用，分享一下，以前做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也加入了該事件，放心的用吧！