发布一个 JavaScript 右击菜单支持 ie678,Firefox,Safari

来源：互联网发布：红色经典知多少手抄报编辑：程序博客网时间：2024/06/02 17:31

/** * @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"></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"></mce:script></body></html>

发布一个 JavaScript 右击菜单 支持 ie678,Firefox,Safari

发布一个 JavaScript 右击菜单支持 ie678,Firefox,Safari