发布一个 JavaScript 右击菜单 支持 ie678,Firefox,Safari
/** * @author wangzhongbin * 2009-08-20 */ var _menus = new Array();//注要解决一个页面有多个菜单 var _current_menu_id = null; /** * 上下文菜单 * @param {Object} object 显示菜单的对象 * @param {Object} menu 菜单对象 */ function CreateMenu(object, menu){ var _object = this; _object.iframe_id = null; _object.onHide = null; _object.onContext = null; _object.menu = menu; menu.style.display = 'none'; menu.style.zIndex = '1000000'; menu.style.listStyleType = 'none'; menu.style.position = 'absolute'; if (document.all){ var iframe = document.createElement('iframe'); //document.body.appendChild(iframe); document.body.insertBefore(iframe,document.body.firstChild); iframe.id = menu.id + '_iframe'; _object.iframe_id = iframe.id; iframe.style.position = 'absolute'; iframe.style.display = 'none'; iframe.style.zIndex = '999999'; iframe.style.border = '0px'; iframe.style.height = '0px'; iframe.style.width = '0px'; } object.oncontextmenu = function(e){ _object.show(e,menu); }; _menus[menu.id]=_object; } /*** * 显示菜单 * @param {Object} event 事件 * @param {Object} menu 菜单对象 */ CreateMenu.prototype.show = function(event,menu){ var _object = _menus[menu.id]; //var e = window.event || arguments.callee.caller.arguments[0]; var e = window.event || event; var as = menu.getElementsByTagName("A"); _object.onHide = function(){ _object.hide(menu); }; if (document.all){ _object.onContext = function(){return false;}; document.attachEvent('oncontextmenu', _object.onContext); document.attachEvent('onmousedown', _object.onHide); for (var i = 0; i < as.length; i++) { as[i].attachEvent('onclick',function(){ _current_menu_id = menu.id; setTimeout('try{var _object=_menus[_current_menu_id];_current_menu_id = null;_object.hide(_object.menu,true);}catch(e){}',500); }); } } else{ _object.onContext = document.oncontextmenu; document.oncontextmenu = function(){return false;}; document.addEventListener('mousedown', _object.onHide, false); for (var i = 0; i < as.length; i++) { as[i].addEventListener('click',function(){ _current_menu_id = menu.id; setTimeout('try{var _object=_menus[_current_menu_id];_current_menu_id = null;_object.hide(_object.menu,true);}catch(e){}',500); }, false); } } var x = document.documentElement.scrollLeft + e.clientX; var y = document.documentElement.scrollTop + e.clientY; menu.style.left = x + 'px'; menu.style.top = y + 'px'; menu.style.display = 'block'; if (_object.iframe_id){ var iframe = document.getElementById(_object.iframe_id); iframe.style.left = x + 'px'; iframe.style.top = y + 'px'; iframe.style.height = menu.offsetHeight + 'px'; iframe.style.width = menu.offsetWidth + 'px'; iframe.style.display = 'block'; } try{ trMouseOver(current_tr); isMenuShow=true; //alert(current_tr.innerHTML); //trMouseOver(current_tr); }catch(e){ } } /** * 隐藏菜单 * @param {Object} menu 菜单对象 * @param {bool} 是否强隐藏 */ CreateMenu.prototype.hide = function(menu,isHide){ var _object = _menus[menu.id]; var is_hide = isHide || false; var e = null; var element = null; if (!is_hide) { e = window.event || arguments.callee.caller.arguments[0]; element = e.srcElement || e.target; do { if (element == menu) return false; } while ((element = element.offsetParent)); if (document.all) document.detachEvent('on' + e.type, _object.onHide); else document.removeEventListener(e.type, _object.onHide, false); } if (document.all) document.detachEvent('oncontextmenu', _object.onContext); else document.removeEventListener('contextmenu', _object.onContext, false);//document.oncontextmenu = _object.onContext; if (_object.iframe_id) { var iframe = document.getElementById(_object.iframe_id); iframe.style.display = 'none'; } menu.style.display = 'none'; try{ isMenuShow=false; trMouseOut(current_tr); } catch(e){ } }
html 调用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <mce:script language="javascript" type="text/javascript" src="ContextMenu.js" mce_src="ContextMenu.js"></mce:script> <title>测试</title> <mce:style type="text/css"><!-- body,div,p,ul,li,span,option,input{font-size:12px;color:#000000;} .contextmenu{background-color:White; border:1px solid #cccccc;padding:5px;font-size:12px} .contextmenu .menuitems{font-size:12px;margin:0px;padding:3px 0px 3px 0px;/*line-height:23px;*/letter-spacing:1px;} .contextmenu .menuitems hr{width:100%;+height:1px;} .contextmenu .menuitems img{vertical-align:middle;border:0px;padding-right:4px} .contextmenu .menuitems a:link {color:#444;text-decoration:none;padding:5px;} .contextmenu .menuitems a:visited {color:#444;text-decoration:none;padding:5px;} .contextmenu .menuitems a:hover {color:#444;text-decoration:underline;padding:5px;background-color:#E7F4FA} .contextmenu .menuitems a:active {color:#444;text-decoration:underline;padding:5px;background-color:#E7F4FA} .contextmenu .menuitemsoff {font-size:12px;margin:0px;/*padding:1px 3px 0px 5px;*/line-height:23px;color:#ACA899;letter-spacing:1px} .contextmenu .menuitemsoff img{vertical-align:middle;border:0px;padding-right:4px} .contextmenu .menuitemsoff a:link {color:#ACA899;text-decoration:none;padding:5px;} .contextmenu .menuitemsoff a:visited {color:#ACA899;text-decoration:none;padding:5px;} .contextmenu .menuitemsoff a:hover {color:#ACA899;text-decoration:underline;padding:5px;background-color:#E7F4FA} .contextmenu .menuitemsoff a:active {color:#ACA899;text-decoration:underline;padding:5px;background-color:#E7F4FA} --></mce:style><style type="text/css" mce_bogus="1">body,div,p,ul,li,span,option,input{font-size:12px;color:#000000;} .contextmenu{background-color:White; border:1px solid #cccccc;padding:5px;font-size:12px} .contextmenu .menuitems{font-size:12px;margin:0px;padding:3px 0px 3px 0px;/*line-height:23px;*/letter-spacing:1px;} .contextmenu .menuitems hr{width:100%;+height:1px;} .contextmenu .menuitems img{vertical-align:middle;border:0px;padding-right:4px} .contextmenu .menuitems a:link {color:#444;text-decoration:none;padding:5px;} .contextmenu .menuitems a:visited {color:#444;text-decoration:none;padding:5px;} .contextmenu .menuitems a:hover {color:#444;text-decoration:underline;padding:5px;background-color:#E7F4FA} .contextmenu .menuitems a:active {color:#444;text-decoration:underline;padding:5px;background-color:#E7F4FA} .contextmenu .menuitemsoff {font-size:12px;margin:0px;/*padding:1px 3px 0px 5px;*/line-height:23px;color:#ACA899;letter-spacing:1px} .contextmenu .menuitemsoff img{vertical-align:middle;border:0px;padding-right:4px} .contextmenu .menuitemsoff a:link {color:#ACA899;text-decoration:none;padding:5px;} .contextmenu .menuitemsoff a:visited {color:#ACA899;text-decoration:none;padding:5px;} .contextmenu .menuitemsoff a:hover {color:#ACA899;text-decoration:underline;padding:5px;background-color:#E7F4FA} .contextmenu .menuitemsoff a:active {color:#ACA899;text-decoration:underline;padding:5px;background-color:#E7F4FA}</style> </head> <body> <table width="100%" cellpadding="1" cellspacing="1" border="1" id="tableManage1"> <tr> <td colspan="9">测试1</td> </tr> <tr> <td>ID1</td> <td>ID2</td> <td>ID3</td> <td>ID4</td> <td>ID5</td> </tr> <tr> <td>ID1</td> <td>ID2</td> <td>ID3</td> <td>ID4</td> <td>ID5</td> </tr> <tr> <td>ID1</td> <td>ID2</td> <td>ID3</td> <td>ID4</td> <td>ID5</td> </tr> </table> <ul id="contextMenu1" class="contextmenu" style="display:none" mce_style="display:none"> <li class="menuitems"><a href="#" mce_href="#">测试测试1</a></li> <li class="menuitems"><a href="#" mce_href="#">测试测试1</a></li> <li class="menuitems"><a href="#" mce_href="#">测试测试1</a></li> <li class="menuitems"><a href="#" mce_href="#">测试测试1</a></li> <li class="menuitems"><a href="#" mce_href="#">测试测试1</a></li> <li class="menuitems"><a href="#" mce_href="#">测试测试1</a></li> </ul> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <table width="100%" cellpadding="1" cellspacing="1" border="1" id="tableManage2"> <tr> <td colspan="9">测试2</td> </tr> <tr> <td>ID1</td> <td>ID2</td> <td>ID3</td> <td>ID4</td> <td>ID5</td> </tr> <tr> <td>ID1</td> <td>ID2</td> <td>ID3</td> <td>ID4</td> <td>ID5</td> </tr> <tr> <td>ID1</td> <td>ID2</td> <td>ID3</td> <td>ID4</td> <td>ID5</td> </tr> </table> <ul id="contextMenu2" class="contextmenu" style="display:none" mce_style="display:none"> <li class="menuitems"><a href="#" mce_href="#">测试测试2</a></li> <li class="menuitems"><a href="#" mce_href="#">测试测试2</a></li> <li class="menuitems"><a href="#" mce_href="#">测试测试2</a></li> <li class="menuitems"><a href="#" mce_href="#">测试测试2</a></li> <li class="menuitems"><a href="#" mce_href="#">测试测试2</a></li> <li class="menuitems"><a href="#" mce_href="#">测试测试2</a></li> </ul> <mce:script language="javascript" type="text/javascript"><!-- var menu1 = new CreateMenu(document.getElementById("tableManage1"), document.getElementById("contextMenu1")); var menu2 = new CreateMenu(document.getElementById("tableManage2"), document.getElementById("contextMenu2")); // --></mce:script> </body> </html>