JS自定义鼠标右键菜单-CFANZ编程社区

JS自定义鼠标右键菜单
<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>自定义鼠标右键菜单</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            #list {
                width: 60px;
                background: #CCC;
                border: 1px solid black;
                position: absolute;
                display: none;
                list-style: none;
                border-bottom: none;
            }

            #list li {
                height: 30px;
                line-height: 30px;
                text-align: center;
                border-bottom: 1px solid #000;
            }
        </style>

    </head>

    <body>
        <ul id="list">
            <li>登 陆</li>
            <li>退 出</li>
            <li>注 销</li>
            <li>走 人</li>
        </ul>

        <script>
            document.oncontextmenu = function (ev) {
                var myEvent = ev || event;
                var list = document.getElementById('list');
                list.style.display = 'block';
                list.style.left = myEvent.clientX + 'px';
                list.style.top = myEvent.clientY + 'px';
                return false;
            };
            document.onclick = function () {
                var list = document.getElementById('list');
                list.style.display = 'none';
            };
        </script>

    </body>

</html>
0 条评论