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 方案来验证上传文件的操作。

查看原文

C#本质论7.0

《C#本质论》是C#最权威、最值得尊重的参考书之一,作者为此付出了非凡的努力!Mark Michaelis的《Essential C#》系列多年来一直是畅销经典。

查看原文

LinqPad 8 分享下载

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

查看原文

C#应用在Windows实现自启动

本文将讲解 C# 应用在 Windows 系统中通过自动设置注册表的形式的形式实现开机自启动,这也是 Windows 系统推荐的做法。

查看原文

Entity Framework Core链接Oracle的问题

最近使用 Entity Framework Core 来链接 Oracle 11g 数据库,发现很多 LINQ 语句使用起来都会有问题,查看日志输出发现是生成SQL语句无法被 11g 版本执行,好在Oracle官方已经给我们提供了解决方案。

查看原文