jquery鼠标右键功能 备忘 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <style type="text/css">
            .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>
        <div id="menu" class='DreamMenu'>
            <a>您好</a>
            <a>我是主菜单</a>
            <a>在页面上单击</a>
            <a>就可以看到我</a>
            <ul></ul>
            <a>打印</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>

        <!-----设置一个菜单menu属性---->
        <div menu='menu' class="menu1" style="width: 100px; height: 100px; border: 1px solid red;">菜单1</div>
        <div menu='menu2' class="menu2" style="width: 100px; height: 100px; border: 1px solid red;">菜单2</div>
        <div menu='menu3' class="menu3" style="width: 100px; height: 100px; border: 1px solid red;">菜单3</div>
    </body>

</html>
<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
<script type="text/javascript">
    if(!document.all) document.captureEvents(Event.MOUSEDOWN);
    var _Tmenu = 0;
    var _Amenu = 0;
    var _Type = 'A';
    var TimeFn = 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) {
        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;
    }
    
</script>
<script>
    _Type = 'INPUT,A,DIV,BODY,IMG';
</script>

 

posted @ 2020-08-28 11:19  ▍凉城空巷°  阅读(169)  评论(0)    收藏  举报