运用js实现自定义右键菜单的功能

最新推荐文章于 2024-08-17 13:44:45 发布

城南花开ze

最新推荐文章于 2024-08-17 13:44:45 发布

阅读量5.4k

点赞数 6

分类专栏： Javascript 文章标签： javascript 自定义右键菜单关闭浏览器自带的菜单

本文链接：https://blog.csdn.net/weixin_42614080/article/details/90273770

版权

Javascript 专栏收录该内容

111 篇文章 17 订阅

订阅专栏

需求分析：设计一个自定义菜单，默认是隐藏的。当单击右键的时候，在浏览器中可以打开，进行显示菜单。当点击屏幕任意位置的时候，自定义的右键菜单可以关闭。
设计思路：先是获取菜单元素，通过return false 关闭浏览器自带的菜单。获取鼠标的坐标以及获取当前窗口的宽度和高度，通过Math函数的min方法，进行调整宽度和高度。当鼠标再次点击的时候，自定义菜单的样式设置为隐藏。
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义右键菜单</title>
    <style>
    body {
        font-size: 16px;
        font-family: "KaiTi";
    }
    * {
        padding: 0;
        margin: 0;
    }
    ul {
        list-style: none;
    }
    a {
        text-decoration: none;
        color: #333;
    }
    .contextmenu {
        width: 200px;
        border: 1px solid #999;
        box-shadow: 3px 3px 3px #ccc;
        background-color: #fff;
        position: absolute;
        top: 10px;
        left: 10px;
        display: none;
    }
    .contextmenu li {
        height: 40px;
        line-height: 40px;
    }
    .contextmenu li a {
        display: block;
        padding: 0 30px;
    }
    .contextmenu li a:hover {
        background-color: #ccc;
        font-weight: bold;
        color: #fff;
    }
    </style>
</head>
<body>

<div class="contextmenu" id="context">
    <ul>
        <li><a href="javascript:;">复制</a></li>
        <li><a href="javascript:;">粘贴</a> </li>
        <li><a href="javascript:;">剪切</a></li>
        <li><a href="javascript:;">下载</a></li>
        <li><a href="javascript:;">上传</a></li>
    </ul>
</div>

</body>
<script>

        document.oncontextmenu = function(env){

            //env 表示event事件
            // 兼容event事件写法
            var e = env || window.event;

            // 获取菜单，让菜单显示出来
           var context = document.getElementById("context");
           context.style.display = "block";

           //  让菜单随着鼠标的移动而移动
           //  获取鼠标的坐标
           var x = e.clientX;
           var y = e.clientY;

           //  获取窗口的宽度和高度
           var w = window.innerWidth;
           var h = window.innerHeight;

           //  调整宽度和高度
           context.style.left = Math.min(w-202,x)+"px";
           context.style.top = Math.min(h-230,y)+"px";

          // return false可以关闭系统默认菜单
           return false;
        };

       //   当鼠标点击后关闭右键菜单
      document.onclick = function(){
          var contextmenu = document.getElementById("context");
          contextmenu.style.display = "none";

      };

</script>
</html>