js实现自定义右键菜单--兼容IE、Firefox、Chrome

浏览数：22 / 时间：2015年06月09日

<!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;
            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 : [email protected]
        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>
    <script>        _Type = ‘INPUT,A,DIV,BODY,IMG‘;</script>
    <!-----设置一个菜单层---->
    <div id="menu" class=‘DreamMenu‘>
        <a href=‘javascript:;‘>您好</a> <a href=‘javascript:;‘>我是主菜单</a> <a href=‘javascript:;‘>
            在页面上单击</a> <a href=‘javascript:;‘>就可以看到我</a>
        <ul>
        </ul>
        <a href=‘javascript:;‘>打印</a>
    </div>
    <!-----设置一个菜单层---->
    <div id="menu2" class=‘DreamMenu‘>
        <a href=‘javascript:;‘>哈哈</a> <a href=‘javascript:;‘>我是个链接</a> <a href=‘javascript:;‘>
            好开心啊</a> <a href=‘javascript:;‘>查看</a>
        <ul>
        </ul>
        <a href=‘javascript:;‘>打印</a>
    </div>
    <!-----设置一个菜单层---->
    <div id="menu3" class=‘DreamMenu‘>
        <a href=‘javascript:;‘>哈哈</a> <a href=‘javascript:;‘>我是图片</a> <a href=‘javascript:;‘>
            虽然打不开</a> <a href=‘javascript:;‘>查看</a>
        <ul>
        </ul>
        <a href=‘javascript:;‘>打印</a>
    </div>
    <table>
        <tr>
            <td height="100">
                <!-----设置一个菜单menu属性---->
                <a href=‘javascript:;‘ menu=‘menu2‘>菜单1</a> <a href=‘javascript:;‘ menu=‘menu2‘>菜单2</a>
            </td>
        </tr>
    </table>
    <div style=‘height: 300;‘ menu=‘menu‘>
    </div>
    <img src=‘qiougou.gif‘ menu=‘menu3‘ />
</body>
</html>