1、contextmenu事件
由于contextmenu事件是冒泡的,因此可以为document制定一个事件处理程序,用以处理页面中发生的所有此类事件。这个事件的目标是发生用户操作的元素。
在所有浏览器中都可以取消这个事件:
在兼容的DOM中可以使用event.preventDefault();
在IE中将event.returnValue的值设为false;
因为contextmenu事件属于鼠标事件,所以其事件对象包含与光标位置有关的所有的属性。
通常使用contextmenu事件来显示自定义的上下文菜单,而使用onclick事件处理程序来隐藏菜单
<!doctype html> <html lang="en"> <head> <meta charset="gb2312"> <title>test</title> <style> *{ margin:0; padding:0; } #div1 { 300px; height:300px; background:blue; margin:0 auto; } #menu { position:absolute; visibility:hidden; background:silver; } #div2 { 100px; height:100px; background:red; } </style> </head> <body style='height:3000px;'> <div id='div1'> Right click or Ctrl+click me <div id='div2'></div> </div> <ul id='menu'> <li><a href='http://www.baidu.com'>百度</a></li> <li><a href='http://www.kelikexin.com'>可丽可心</a></li> <li><a href='http://www.yahoo.com'>雅虎</a></li> </ul> <script> var EventUtil = { addHandler: function(element,type,handler){//添加事件 if (element.addEventListener) { element.addEventListener(type,handler,false); }else if (element.attachEvent) { element.attachEvent('on'+type,handler); }else { element['on'+type] = handler; } }, getEvent: function(event){//获得事件对象 return event || window.event; }, getTarget: function(event){//获得事件元素 return event.target || event.srcElement; }, preventDefault: function(){//取消默认事件行为 if (event.preventDefault) { event.preventDefault(); }else { event.returnValue = false; } }, removeHandler: function(element,type,handler){//取消事件 if (element.removeEventListener) { element.removeEventListener(type,handler,false) }else if (element.dettchEvent) { element.dettchEvent('on'+type,handler); }else { element['on'+type] = null; } }, stopPropagation: function(event){//取消冒泡机制 if (event.stopPropagation) { event.stopPropagation(); }else { event.cancleBubble = true; } }, getRelatedTarget: function(event){ if (event.relatedTarget) { return event.relatedTarget;//标准下返回相关元素 }else if (event.toElement) { return event.toElement;//mouseout事件触发,保存相关元素 }else if (event.fromElement) { return event.fromElement;//mouseover事件触发,保存相关元素 } }, getButton: function(event){//鼠标按钮兼容 if (document.implementation.hasFeature('MouseEvents','2.0'))//标准下 { return event.button; }else { switch (event.button)//非标准下 { case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; } } }, getWheelDelta: function(event){//滚轮事件兼容 //所以要兼容,写两个函数函数 //client的兼容性必须先写出来 if (event.wheelDelta) { /* 兼容opear9.5以前版本的正负相反,mousewheel */ return (window.client.engine.opera && window.client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta); }else { /* 兼容firefox正负和3的倍数的问题,DOMMouseScroll */ return -event.detail*40; } }, getCharCode: function(event){//键盘事件兼容 if (typeof event.charCode == 'number')//首先检测按键有没有代表的字符,如果没有就没有charCode,为undefined { return event.charCode; }else { return event.keyCode } } } //load function load(event){ var div = document.getElementById('div1'); EventUtil.addHandler(div,'contextmenu',menu1); EventUtil.addHandler(document,'click',menu2); //测试 EventUtil.addHandler(); } //menu1显示 function menu1(event){ event = EventUtil.getEvent(event); EventUtil.preventDefault(event); var oUl = document.getElementById('menu'); oUl.style.left = event.clientX + 'px'; oUl.style.top = event.clientY + 'px'; oUl.style.visibility = 'visible'; } //menu2消失 function menu2(event){ document.getElementById('menu').style.visibility = 'hidden'; } //文档加载 EventUtil.addHandler(window,'load',load); </script> </body> </html>
自己的实例:
EventUtil.addHandler(window,'load',load); //加载 function load(event){ var menu = document.getElementById('menu'); EventUtil.addHandler(document,'contextmenu',menu1); EventUtil.addHandler(document,'click',menu2) } //menu1显示 function menu1(event){ event = EventUtil.getEvent(event); EventUtil.preventDefault(event); console.log(menu); menu.style.left = event.clientX +'px'; menu.style.top = event.clientY +'px'; menu.style.visibility = 'visible'; } //menu2 function menu2(event){ menu.style.visibility = 'hidden'; }