js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)_javascript技巧
程序员文章站
2022-04-06 15:40:51
...
版本虽然很老也不符合标准了，不过代码是值得参考的，需要右键菜单的朋友可以参考下。
里面的代码修改也比较简单。
<html>
<head>
<title>ddd</title>
<style>
.DreamMenu {
position:absolute;
visibility:hidden;
z-index:100;
overflow:hidden;
width:150px;
background-color:buttonface;
border:dimgray 1px solid !important;
border:buttonhighlight menu menu buttonhighlight 2px outset;
padding:1px !important;
padding:1px 1px 1px 0px;
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 20px;
cursor:default;
text-decoration:none;
color:#000000;
}
.DreamMenu a:hover {
background:highlight;
color:#ffffff;
}
</style>
</head>
<body menu='menu'>
<!---这段js最好写进文件方便用，为了在51能运行就直接写进来了--->
<script>
/***
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';
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)
{
var _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;
}
/***
可以支持其他标签INPUT,IMG
***/
</script>
<script>_Type='INPUT,A,DIV,BODY,IMG';</script>
<!-----设置一个菜单层---->
<div id="menu" class='DreamMenu'>
<a href='http://www.jb51.net'>脚本之家</a>
<a href='http://www.baidu.com'> 百度</a>
<a href='http://www.g.cn'>google</a>
<a href='http://tools.jb51.net'>站长工具</a>
<ul></ul>
<a href='4'>打印</a>
</div>
<!-----设置一个菜单层---->
<div id="menu2" class='DreamMenu'>
<a href='0'>哈哈</a>
<a href='1'>我是个链接</a>
<a href='2'>好开心啊</a>
<a href='3'>查看</a>
<ul></ul>
<a href='4'>打印</a>
</div>
<!-----设置一个菜单层---->
<div id="menu3" class='DreamMenu'>
<a href='0'>哈哈</a>
<a href='1'>我是图片</a>
<a href='2'>虽然打不开</a>
<a href='3'>查看</a>
<ul></ul>
<a href='4'>打印</a>
</div>
<table><tr><td height=100>
<!-----设置一个菜单menu属性---->
<a href='test.php' menu='menu2'>菜单1</a>
<a href='test.php' menu='menu2'>菜单2</a>
</td></tr></table>
<div style='height:300;' menu='menu'></div>
<img src='http://www.jb51.net/images/logo.gif' menu='menu3'>