JS简单实现自定义右键菜单

Posted 2020-10-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS简单实现自定义右键菜单相关的知识，希望对你有一定的参考价值。

用到的知识点： oncontextmenu(右键点击事件,指用户右击鼠标时触发并打开上下文菜单)
　　所以，我们要知道的就是，在触发contextmenu事件时，取消默认行为(也就是阻止浏览器显示自带的菜单)
通过传入的事件对象，来确定鼠标的点击位置，作为left和top的值来进行元素的定位，并显示自定义菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>右键菜单</title>
    <style>
        /*清除reset css*/
        ul{
            padding:0;
            margin: 0;
            list-style: none;
        }
        /*main*/
        #list{
            width:160px;
            height:200px;
            border:1px solid #f4979a;
            box-shadow:0px 0px 5px #f4979a;
            display: none;
            /*一定要用绝对定位*/
            position: absolute;
        }
        #list li{
            height:50px;
            line-height:50px;
            font-size:16px;
            color:#ea6a66;
            text-align:center;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>下载</li>
        <li>删除</li>
        <li>移动到...</li>
        <li>重命名</li>
    </ul>
</body>
    <!--js-->
    <script>


        //************获取元素***********
        var listBox = document.getElementById(‘list‘);//获取自定义右键菜单

        //鼠标右键点击事件
        document.oncontextmenu = function(ev){
            //兼容性写法示例：
            var ev = ev || event;//或（||）书写顺序有讲究，不能随意换

           //阻止默认行为
            ev.preventDefault();

            //记录当前的坐标(x轴和y轴)
            var x = ev.clientX;
            var y = ev.clientY;

            listBox.style.display = ‘block‘;//右键点击时显示菜单框
            listBox.style.left = x + ‘px‘;
          　listBox.style.top = y + ‘px‘;

　　　　　　　//关闭右键
            document.onclick = function(){
                listBox.style.display = ‘none‘;//再次点击时隐藏菜单框
            }
        }

    </script>
</html>

实例如下：

技术分享图片

以上是关于JS简单实现自定义右键菜单的主要内容，如果未能解决你的问题，请参考以下文章