主要控制應該何時顯示上下文菜單，以便開發人員取消默認的上下文菜單而提供自定義的菜單
<1> 由於該事件是冒泡的，因此可以為document 指定一個事件處理程序，用以處理頁面中發生的所有此類事件。
EventUtil.addHandler(document,"contextmenu",function(event){ console.log("收到"); //收到 }) EventUtil.addHandler(document.body,"contextmenu",function(event){ console.log("冒泡？");//冒泡？ });
<2> 在兼容DOM的瀏覽器中，使用event.preventDefault();在IE中，將event.returnValue的值設置為false。 IE、chrome、Frifox、Opera、Safari
EventUtil.addHandler(document,"contextmenu",function(event){ console.log("收到"); }) EventUtil.addHandler(document.body,"contextmenu",function(event){ event.preventDefault()?event.preventDefault():event.returnValue=false; });
<3> 因為contextmenu 事件屬於鼠標事件，所以其事件對象中包含於光標位置有關的所有屬性。
EventUtil.addHandler(document.body,"contextmenu",function(event){ var event = EventUtil.getEvent(event); event.preventDefault()?event.preventDefault():event.returnValue=false; console.log(" x 坐標："+event.clientX+" y坐標："+event.clientY); // 200 300 console.log(EventUtil.getTarget(event));//body \ li \ ul });
<4> 一般常用 contextmenu來顯示菜單，onclick 事件處理程序來隱藏該菜單。
<style> .hidden{ visibility: hidden; position: absolute; } </style> <body style="height:1500px;"> <ul id="menu"> <li>123</li> <li>234</li> <li>567</li> </ul> </body>
EventUtil.addHandler(window,"load",function(event){ var ul = document.getElementById("menu"); ul.className = "hidden"; EventUtil.addHandler(document,"contextmenu",function(event){ event = EventUtil.getEvent(event); EventUtil.preventDefault(event); var menu = document.getElementById("menu"); menu.top = event.clientY;
menu.left = event.clientX;
menu.style.visibility = "visible"; }); EventUtil.addHandler(document,"click",function(){ document.getElementById("menu").style.visibility ="hidden"; }); });
主要是對document對象添加了一個contextmenu事件，以及給文檔對象添加click事件進行隱藏; 這里並不是沒有問題的？
當文檔出現滾動條時候，菜單位置似乎和想象中有偏差？ 其實不管在那種情況下，只要能夠獲取鼠標的坐標，而坐標信息可以通過事件對象進行取得？
從前面講到的 幾個位置屬性： clientX 、clientY、 pageX、pageY 前兩者相對的視口的位置， 后兩者相對文檔的位置 scorllTop 、scrollLeft 滾動條距離頂部 、 左邊的距離
由於瀏覽器的差異，在IE8以及下面的版本對pageX、pageY不能正確獲取？先給大家上個圖吧
針對EventUtil進行了擴展
getScrollTop:function() {
if (document.compatMode == "CSS1Compat") {
return document.documentElement.scrollTop;
} else {
return document.body.scrollTop;
}
},
getScrollLeft:function(){
if(document.compatMode=="CSS1Compat"){
return document.documentElement.scrollLeft;
}else{
return document.body.scrollLeft;
}
}
主要配合clientX 以及 clientY菜單位置的正確顯示。
EventUtil.addHandler(window,"load",function(event){
var ul = document.getElementById("menu");
ul.className = "hidden";
EventUtil.addHandler(document,"contextmenu",function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
var menu = document.getElementById("menu");
var top = EventUtil.getScrollTop();
var left = EventUtil.getScrollLeft();
menu.style.left = event.clientX + left;
menu.style.top = event.clientY + top;
menu.style.visibility = "visible";
});
EventUtil.addHandler(document,"click",function(){
document.getElementById("menu").style.visibility ="hidden";
});
});
那還有另外種方式推薦
EventUtil.addHandler(window,"load",function(event){
var ul = document.getElementById("menu");
ul.className = "hidden";
EventUtil.addHandler(document,"contextmenu",function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
var menu = document.getElementById("menu");
var top = EventUtil.getScrollTop();
var left = EventUtil.getScrollLeft();
menu.style.left = event.pageX?event.pageX:event.clientX + left;
menu.style.top = event.pageY?event.pageY:event.clientY + top;
menu.style.visibility = "visible";
});
EventUtil.addHandler(document,"click",function(){
document.getElementById("menu").style.visibility ="hidden";
});
});
支持contextmenu 事件的瀏覽器有IE、Firefox、Safari、Chrome、Opera 11+