主要控制应该何时显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单
<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+
时间： 2024-08-26 19:45:11