自定义的右键菜单

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