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
其他阅读

Blazor文件上传解决方案

Blazor 是由 Asp.Net Core 团队推出的一个Web前端SPA解决方案,其中包括了使用 WebAssembly 的 Blazor Wasm 和使用 SignalR 进行实时交互的 Blazor server。本篇文章中使用的是 Blazor Wasm 方案来验证上传文件的操作。

查看原文

命令行打包.net项目

.net 日常开发中,我们接触最多的就是 Visual Studio ,它是微软为了 .net 平台专门打造的 IDE (集成开发环境),为整个 .net 平台开发带来了无与伦比的图形化体验,但是有时候,我们也会遇到需要通过命令行来生成 .net 项目的情况,本文会介绍几种命令行打包的姿势。

查看原文

我的读书清单

分享互联网人的读书清单,从2024年开始,本文会整理我读过的书籍,按时间排序,编辑成一份读书清单。

查看原文

管道技术——中间件的灵魂

在现代Web开发中,中间件技术使用越来越广泛,本文带大家了解中间件的基础,同时也是中间件的灵魂所在,管道技术。在C#中,依赖于委托,我们可以很容易就实现一个中间件管道。所以在阅读本文前,请确保你已经学会了什么是委托,包括但不限于Delegate,Action,Func。除此之外,本文还会使用到反射相关知识,请确保你已经学会了什么是反射。

查看原文

WPF中切换主题功能

在现代 Windows 系统中,系统提供了亮色主题和暗色主题,Windows 自带的应用程序都已经适配该功能。本文介绍在使用 WPF 构建 Windows 窗口应用时怎么实现主题切换。

查看原文