[浏览器事件]自定义的右键菜单

最新推荐文章于 2022-07-25 17:00:00 发布

weixin_30394669

最新推荐文章于 2022-07-25 17:00:00 发布

阅读量80

点赞数

原文链接：http://www.cnblogs.com/zhongshanblog/articles/4652638.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            width: 100px;
            background: #ccc;
            border:1px solid #000;
            position: absolute;
            display: none;
            list-style: inside;
        }
        li {

        }
    </style>
</head>
<body>
    <ul id="ul1">
        <li>登陆</li>
        <li>注销</li>
        <li>回到首页</li>
        <li>加入</li>
    </ul>
    <script>
        
        document.oncontextmenu = function (ev){
            var oEvent = ev || event;
            var oUl = document.getElementById("ul1");
            var scrollTop = document.documentElement.scrollTop || 
                    document.body.scrollTop;
            oUl.style.display = "block";

            oUl.style.left = oEvent.clientX + 'px';
            oUl.style.top = scrollTop + oEvent.clientY + 'px';
            return false;
        }

        document.onclick = function (){
            var oUl = document.getElementById("ul1");
            oUl.style.display = "none";
        }
    </script>
</body>
</html>