JS实现页面右键菜单--简易版(一)

本文已参与「新人创作礼」活动，一起开启掘金创作之路

前言

右键菜单也算是前端页面中比较常见的功能了，根据需求的不同以及其他原因，将右键菜单功能分为两篇完成，这一篇为简易版的右键菜单，需要源码的可以直接查看第二篇，优化版右键菜单。

contextmenu事件

实现右键菜单我们需要用到 oncontextmenu事件，oncontextmenu事件会在用户右击鼠标时触发。

阻止原有菜单

首先，我们将其绑定到window上：window.oncontextmenu。

然后，通过event.preventDefault() 方法阻止掉原有的右键菜单，为我们绑定上新的功能做好准备工作。

         window.oncontextmenu = function(e){
            //取消默认的浏览器自带右键
            e.preventDefault();
        }

创建菜单

创建对应菜单的dom结构，并绑定上对应的功能函数：

    <div id="menu" class="menu">
        <div class="menu__item" onclick="log('1')">功能1</div>
        <div class="menu__item" onclick="log('2')">功能2</div>
        <div class="menu__item" onclick="log('3')">功能3</div>
        <div class="menu__item">功能4 <span class="icon"> > </span>
            <div id="submenu" class="submenu">
                <div class="submenu__item" onclick="log('4-1')">功能4-1</div>
                <div class="submenu__item" onclick="log('4-2')">功能4-2</div>
                <div class="submenu__item" onclick="log('4-3')">功能4-3</div>
                <div class="submenu__item" onclick="log('4-4')">功能4-4</div>
            </div>
        </div>
        <div class="menu__item" onclick="log(5)">功能5</div>
    </div>

当然，现在它还是固定的，不能移动。

菜单随鼠标联动

我们将菜单绝对定位，然后利用event的clientX/clientY 属性，将获取的触发点坐标动态赋给菜单的top/left属性，这样菜单就可以跟鼠标联动了。

        const menu=document.getElementById('menu');
        //根据事件对象中鼠标点击的位置，进行定位
        menu.style.left=e.clientX+'px';
        menu.style.top=e.clientY+'px';

现在菜单虽然能跟鼠标联动了，但它现在还不能在默认情况下隐藏。

怎么办？

菜单显隐

很简单，我们先将菜单通过visibility: hidden;隐藏；

        .menu{
            position: absolute;
            top:0px;
            left: 0px;
            background: #fff;
            border: 1px solid #dadce0;
            visibility: hidden;
        }
        .active{
            visibility: visible;
        }

然后再触发 window.oncontextmenu的时候,添加active显示菜单；

     menu.classList.add('active');

现在，菜单功能基本完成了，只需要在 window 上绑定点击事件，然后将active移出，即可隐藏掉菜单；

        //关闭右键菜单
        window.addEventListener('click', function() {
            menu.classList.remove('active');
        })

右键菜单简易版.gif

到此简易版的右键菜单功能我们就实现了

如果大家还有什么其他想法，欢迎在评论区交流！