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

其他阅读

新版本.Net关于Process.Start的问题

.Net 开发中,试用 Process.Start() 来启动一个新进程,当我们传入的是具体文件或者链接的时候,系统也会根据默认打开方式打开对应的进程。但是在新版本的 .Net 中,试用 Process.Start() 来打开文件或者链接的时候,会抛出 System.ComponentModel.Win32Exception 的错误,提示系统找不到指定的文件。

使用表达式树来提高反射的性能

反射是C#中一种常用的技术,反射提供了动态创建和访问对象的基础,但是反射在带来了极强的灵活性的同时,也带了极大的性能损耗,本文就介绍通过表达式树来提高反射过程中的性能。

Angular使用路由复用实现单页多窗(Tab)

我们在开发后台管理系统时,一个很重要的需求就是多窗口编辑,来回切换使用。一种思路是使用iframe来记录多个多页面展示,本文通过Angular路由复用来实现这一需求。

静态文件防盗链的一种思路

在我们的系统中,总会有一些资源需要保护起来不被盗走,如果是动态接口可以通过验证权限来保护,静态资源大多需要对外开放,比较难以保护,本文就介绍保护静态文件资源一种思路——那就是使用 HTTP 中 Referer 头。

LinqPad 8 分享下载

LinqPad是一个 .Net 快速验证工具,使得.Net开发者可以不借助 Visual Studio 就可以快速验证想法,毕竟vs冷启动和创建项目耗时久,负担大。本文分享一个LinqPad学习版,可直接下载使用。