Web前端中实现自定义右键菜单

在原生的桌面应用中，右键菜单是个很常见也很常用的东西，但是在Web应用中，由于浏览器自带了右键菜单，所以我们很少见到应用有自己的右键菜单，但不常见并不代表没有，本文就会介绍一个右键菜单的实现。

重点

实现右键菜单的重点就是对鼠标右键点击事件的拦截，防止他响应浏览器默认事件，右键点击事件是 contextmenu，使用 preventDefault() 方法来阻止事件被浏览器响应之后写入正常的dom操作即可。

实现

<!DOCTYPE html>
<html>
<head>
    <title>右键菜单</title>
    <style type="text/css">
        body {
            background: linear-gradient(to bottom right, blue 20%, pink 20%, red);
            background-size: 100vw 100vh;
        }
        
        #right-menu {
            position: absolute;
            width: 200px;
            height: auto;
            display: none;
            padding: 2px 0;
            box-shadow: 0px 0 5px #aaa;
            border-radius: 8px;
            background: rgba(255, 255, 255, .75);
            backdrop-filter: saturate(180%) blur(20px);
            --webkit-backdrop-filter: saturate(180%) blur(20px);
        }
        
        .menu-item {
            height: 35px;
            line-height: 35px;
            margin: 4px 0;
            padding: 0 10px;
            cursor: pointer;
            background-color: transparent;
        }
        
        .menu-item:hover {
            background: rgba(223, 223, 223, 0.55);
        }
        
        .menu-item-separator {
            border-top: 1px #ccc solid;
            height: 1px;
        }
    </style>
</head>
<body>
    <div id="right-menu">
        <div class="menu-item">返回</div>
        <div class="menu-item">执行</div>
        <div class="menu-item">启动</div>
        <div class="menu-item">删除</div>
        <div class="menu-item">导出</div>
        <div class="menu-item">导入</div>
    </div>
    <script type="text/javascript">
        const menu = document.querySelector("#right-menu");
        window.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            menu.style.display = "block";
            menu.style.left = e.clientX + "px";
            menu.style.top = e.clientY + "px";
        });
        window.addEventListener('click', (e) => {
            menu.style.display = "none";
        });
    </script>
</body>
</html>

发布时间：2022-02-13