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>

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com