contextmenu事件：用以表示何時應(yīng)該顯示上下文菜單郁油，以便開發(fā)人員取消默認的上下文菜單而提供自定義的菜單
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title>DOM3 event textInput</title>
<style type="text/css">
#myMenu{
position: absolute;
background: #eee;
border: 1px solid #f00;
list-style: none;
visibility: hidden;
}
</style>
</head>
<body>
<div id="myDiv">右鍵單擊或者CTRL+單擊獲取自定義菜單卧惜，單擊其他地方獲取默認的菜單</div>
<ul id="myMenu">
<li><a >百度</a></li>
<li><a >新浪</a></li>
<li><a >騰信</a></li>
</ul>
<script type="text/javascript">
window.onload = function(){
document.getElementById('myDiv').addEventListener('contextmenu',function(e){
e.preventDefault();//取消瀏覽器默認行為，以保證不顯示瀏覽器默認的上下文菜單
var menu = document.getElementById('myMenu');
menu.style.left = e.clientX+"px";
menu.style.top = e.clientY+"px";
menu.style.visibility = 'visible';
},false);
document.addEventListener('click',function(){
var menu = document.getElementById('myMenu');
menu.style.left = "0px";
menu.style.top = "0px";
menu.style.visibility = 'hidden';
},false);
}
</script>
</body>
</html>
效果如下所示
自定義右鍵菜單的效果
