javascript 实现各浏览器兼容的右键菜单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>javascript右键菜单</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
.DreamMenu {
position: absolute;
visibility: hidden;
z-index: 100;
overflow: hidden;
width: 150px;
background-color: buttonface;
background:#F9F8F7 url(img/img47/cmenu-xp-bg.gif) repeat-y top left;
border: 1px solid #666;
border: buttonhighlight menu menu buttonhighlight 2px outset;
padding: 1px;
font-size: 12px;
}
.DreamMenu ul {
margin: 1px;
border-bottom: buttonhighlight 1px solid;
border-top: buttonshadow 1px solid;
}
.DreamMenu a {
display: block;
width: 100%;
padding: 1px 2px 2px 25px;
cursor: default;
text-decoration: none;
color: #000000;
}
.DreamMenu a:hover {
background: highlight;
color: #ffffff;
}
.show_bom td{
height:30px;
padding:5px;
}
</style>
</head>
<body menu='menu'>
<script type="text/javascript">
/***
DreamCore - JsLib/Menu
Date : Dec 03, 2006
Copyright: DreamSoft Co.,Ltd.
Mail : Dream@Dreamsoft.Ca
Author : Egmax
Browser : IE5.0&+,Firefox1.5&+,Netscape7.0&+
Update:
***/
if(!document.all) document.captureEvents(Event.MOUSEDOWN);
var _Tmenu = 0;
var _Amenu = 0;
var _Type = 'A';
var _Menu = "null";
document.onclick = _Hidden;
function _Hidden()
{
if(_Tmenu==0) return;
document.getElementById(_Tmenu).style.visibility='hidden';
_Tmenu=0;
}
document.oncontextmenu = function (e)
{
_Hidden();
var _Obj = document.all ? event.srcElement : e.target;
if(_Type.indexOf(_Obj.tagName) == -1) return;
_Amenu = _Obj.getAttribute('menu');
if(_Amenu == 'null') return;
if(document.all) e = event;
_ShowMenu(_Amenu, e);
return false;
}
function _ShowMenu(Eid, event)
{
_Menu = document.getElementById(Eid);
var _Left = event.clientX + document.body.scrollLeft;
var _Top = event.clientY + document.body.scrollTop;
_Menu.style.left = _Left.toString() + 'px';
_Menu.style.top = _Top.toString() + 'px';
_Menu.style.visibility = 'visible';
_Tmenu = Eid;
_Menu.onclick = transfer;
_Menu.oncontextmenu = no_context_menu;
}
function transfer(e){
e=e||window.event;e.cancelBubble=true;
}
function no_context_menu(e){
e=e||window.event;
e=e||window.event;e.cancelBubble=true;
return;
}
/***
可以支持其他标签INPUT,IMG
***/
</script>
<!-----设置一个菜单层---->
<div id="menu1" class='DreamMenu'>
<a href='javascript:;'>Disable1</a>
<a href='javascript:;'>Deviation</a>
<a href='javascript:;'>Show BOM</a>
</div>
<!-----设置一个菜单层---->
<div id="menu2" class='DreamMenu'>
<a href='javascript:;'>Disable2</a>
<a href='javascript:;'>Deviation</a>
<a href='javascript:;'>Show BOM</a>
</div>
<!-----设置一个菜单层---->
<div id="menu3" class='DreamMenu'>
<a href='javascript:;'>Disable3</a>
<a href='javascript:;'>Deviation</a>
<a href='javascript:;'>Show BOM</a>
</div>
<table class="show_bom">
<tr>
<td height=100>
<!-----设置一个菜单menu属性---->
<a href='javascript:;' menu='menu1'>0129-5116 (C11E000284) Dec 12, 2006</a>
</td>
<td>
<a href='javascript:;' menu='menu2'>0433-2440 (UNKNOW) Dec 12, 2006</a>
</td>
<td>
<a href='javascript:;' menu='menu3'>CESB005102-100 (E81E002604) Mar 14, 2012</a>
</td>
</tr>
<tr>
<td height=100>
<!-----设置一个菜单menu属性---->
<a href='javascript:;' menu='menu1'>CESB006001-100 (E81E003356) Mar 14, 2012</a>
</td>
<td>
<a href='javascript:;' menu='menu2'>CESB010107-100 (E81E003729) Mar 13, 2012</a>
</td>
<td>
<a href='javascript:;' menu='menu3'>CSP860077965 (E85E011430) Nov 13, 2007</a>
</td>
</tr>
<tr>
<td height=100>
<!-----设置一个菜单menu属性---->
<a href='javascript:;' menu='menu1'>0129-5116 (C11E000284) Dec 12, 2006</a>
</td>
<td>
<a href='javascript:;' menu='menu2'>CESB006001-100 (E81E003356) Mar 14, 2012</a>
</td>
<td>
<a href='javascript:;' menu='menu3'>DC554920-001 (C11E000308) Dec 13, 2006</a>
</td>
</tr>
</table>
</body>
</html>
