HTML5-常见的事件- contextmenu 事件
主要控制应该何时显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单
<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+
