javascript 自定义鼠标右键菜单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #menu{
                border:solid 1px gray;
                width:100px;
                display:none;
                position:absolute;
                background-color:ghostwhite;
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            #menu>li{
                border-bottom: dashed 1px gray;
            }
        </style>
        <script type="text/javascript">
        window.onload=function(){
            var oUl=document.getElementById('menu');
                document.oncontextmenu=function(ev){
                    var oEvent=ev||event;
                    //一定要加px,要不然chrom不认
                    oUl.style.top=oEvent.clientY+'px';
                    oUl.style.left=oEvent.clientX+'px';
                    oUl.style.display='block';
                    return false;
                }
                document.onclick=function(){
                    oUl.style.display='none';
                }
        };
        </script>
    </head>
    <body>
<ul id="menu">
    <li><a href="http://www.baidu.com" target="_blank">百度一下</a></li>
    <li><a href="http://www.baidu.com" target="_blank">百度一下</a></li>
    <li><a href="http://www.baidu.com" target="_blank">百度一下</a></li>
    <li><a href="http://www.baidu.com" target="_blank">百度一下</a></li>
</ul>
    </body>
</html>

 

posted @ 2016-01-07 09:45  caichao  阅读(328)  评论(0编辑  收藏  举报