自定义右键菜单

来源：互联网发布：两个数字匹配算法编辑：程序博客网时间：2024/06/05 02:38
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <style>        *{margin:0;padding:0;}        ul, li{list-style:none;}        li{margin: 5px 10px;}        #context-menu{width:150px;height:200px;border:1px solid black;            background:lightblue;display:none;position:absolute;top:0;left:0;}    </style>    <body>        自定义右键菜单        <div id="context-menu">            <ul>                <li><a href="#">功能1-1</a></li>                <li><a href="#">功能1-2</a></li>                <li><a href="#">功能1-3</a></li>                <li><hr /></li>                <li><a href="#">功能2-1</a></li>                <li><a href="#">功能2-2</a></li>            </ul>        </div>    </body>    <script>        var oContextMenu = document.getElementById('context-menu');        // 0. 重置contextmenu        document.oncontextmenu = function(e){            // 1. 获取鼠标出现的坐标            e = e || event;            // 2. 修改自定义菜单的left和top            oContextMenu.style.left = e.clientX + 'px';            oContextMenu.style.top = e.clientY + 'px';            // 3. 让自定义菜单的diplay改变为block            oContextMenu.style.display = 'block';            // 4. 禁止默认打开右键菜单            return false;        }        // 关闭自定义的菜单，无论点击浏览器的那个地方菜单都需要关闭，事件绑定在document上        document.onclick = function(){            oContextMenu.style.display = 'none';                    }    </script></html>
0 0