码迷,mamicode.com
首页 > 编程语言 > 详细

javascript 自定义鼠标右键菜单

时间:2016-01-07 10:03:39      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:

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

 

javascript 自定义鼠标右键菜单

标签:

原文地址:http://www.cnblogs.com/chao2014/p/5108767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!