zoukankan html css js c++ java

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

<!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 : 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>
    <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>

经过上面的改编：

if (!document.all) document.captureEvents(Event.MOUSEDOWN);
var _Tmenu = 0;
var _Amenu = 0;
var _Type = 'DIV';
document.onclick = _Hidden;
function _Hidden() {
    if (_Tmenu || _Tmenu == null || _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 || _Amenu == null || _Amenu == 'null') return;
    if (document.all) e = event;
    _ShowMenu(_Amenu, e);
    return false;
}
function _ShowMenu(Eid, event, type) {
    var _Menu = document.getElementById(Eid);
    var _Left = event.clientX + document.body.scrollLeft;
    var _Top = event.clientY + document.body.scrollTop;
    var _menuOffsetHeight = parseInt(_Menu.offsetHeight);
    if (parseInt(document.body.clientHeight) - parseInt(_Top) < _menuOffsetHeight) {//400
        _Top = _Top - _menuOffsetHeight;
        _Menu.style.left = _Left.toString() + 'px';
        _Menu.style.top = _Top.toString() + 'px';
        _Menu.style.visibility = 'visible';
        _Tmenu = Eid;

    }
    else {
        _Menu.style.left = _Left.toString() + 'px';
        _Menu.style.top = _Top.toString() + 'px';
        _Menu.style.visibility = 'visible';
        _Tmenu = Eid;
    }
}

查看全文

相关阅读:
9-python 的ProxyHandler处理器（代理设置）
2018.2.7 css 的一些方法盒子模型
 2018.2.6 JS-判断用户浏览器
 2018.2.5 PHP如何写好一个程序用框架
 2018. 2.4 Java中集合嵌套集合的练习
 2018.2.3 Centos 的vim好看的主题配置及JDK的安装配置
 2018.2.2 java中的Date如何获取年月日时分秒
 2018.2.2 JavaScript中的封装
 2018.1.30 PHP编程之验证码
 2018.1.29 计算机二级错题汇总（二）

原文地址：https://www.cnblogs.com/elves/p/3600085.html