转一个右键菜单，支持不同对象不同菜单，兼容IE、Firefox-优快云博客

本文介绍了一种使用HTML和JavaScript实现自定义右键菜单的方法。通过为不同元素设置menu属性，可在页面任意位置弹出自定义菜单。支持IE5.0+、Firefox1.5+等浏览器。

<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'>

<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='0'>您好</a>
<a href='1'>我是主菜单</a>
<a href='2'>在页面上单击</a>
<a href='3'>就可以看到我</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>

<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://bbs.51js.com/images/default/logo.gif' menu='menu3'>

转载于:https://www.cnblogs.com/heimark/archive/2010/01/26/1656723.html