当前位置： 首页 > news >正文

原生 HTML/CSS/JS 实现右键菜单和二级菜单

news 2026/4/3 5:45:48

文章来源：www.huhailong.vip 站点
文章源地址：https://www.huhailong.vip/article/1764653112011841538

Demo效果演示地址
先看效果图
image.png{{{width=“auto” height=“auto”}}}

需要注意的就是边界检测处理，到极端点击底部和右侧时如果不做处理会遮挡菜单，影响使用，我的解决方案是动态监测窗口的宽高，根据右击时的横纵坐标判断菜单的最终位置，如果 右击的纵坐标+菜单高度 >= 窗口高度 则将菜单显示的高度坐标定位菜单高度，防止下方遮挡，如果 右击的横坐标+菜单宽度 >= 窗口的宽度则菜单横坐标为窗口宽度减去两倍的窗口宽度，避免菜单遮挡。

完整代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>右键菜单</title><!-- 阿里图标 --><!-- <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/c/font_4453355_yizetjv4jeo.css" /> --><style>html,body {margin: 0;overflow: hidden;width: 100%;}#test-area {border: 1px solid black;width: 100%;height: 100vh;background-color: #333333;display: flex;align-items: center;justify-content: center;}.menu {width: 200px;display: flex;flex-direction: column;position: absolute;border: 1px solid gray;background-color: #333333;color: white;border-radius: 4px;font-size: 14px;}.menu>ul {list-style: none;padding: 0;margin: 0;}.menu>ul>li {padding: 10px;cursor: pointer;}.menu>ul>li:hover {background-color: #1A6CE7;}hr {margin: 0;border: 1px solid gray;}.submenu {padding: 0;left: 200px;margin-top: -32px;position: absolute;display: none;}.link {display: flex;align-items: center;justify-content: space-between;}.iconfont {font-size: 14px;padding-right: 5px;}.tip {font-size: 40px;color: gray;}</style>
</head><body><!-- 右键点击测试区域 --><div id="test-area"><div class="tip">点击右键查看效果</div></div><!-- 右键菜单1 --><div class="menu" id="right-menu" hidden><ul><li><i class="iconfont icon-chakan1"></i>查看详情</li><li><i class="iconfont icon-chakanziduan"></i>打开表字段提示</li><hr /><li><i class="iconfont icon-chakansql"></i>在SQL编辑器查看数据</li><li><i class="iconfont icon-a-Property1shengchengshuju"></i>生成测试数据</li><li><i class="iconfont icon-jurassic_export-data"></i>导出数据</li><li><i class="iconfont icon-jurassic_import-data"></i>导入数据</li><li><i class="iconfont icon-shujuqianyi_huaban"></i>数据迁移</li><li><i class="iconfont icon-biaogeduibi"></i>表结构对比</li><hr /><li id="generate-sql"><div class="link"><span><i class="iconfont icon-shengchengSQL"></i>生成SQL</span><span>></span></div><div class="submenu menu" id="right-menu2"><ul><li>查找</li><li>插入</li><li>更新</li><li>删除</li><li>DDL</li></ul></div></li><li id="copy"><div class="link"><span><i class="iconfont icon-fuzhi"></i>复制</span><span>></span></div><div class="submenu menu" id="right-menu3"><ul><li>Insert语句</li><li>CVS语句</li></ul></div></li><li><i class="iconfont icon-shanchu"></i>删除</li><li><i class="iconfont icon-zhongmingming"></i>重命名</li><hr /><li><i class="iconfont icon-shuaxin"></i>刷新</li></ul></div><script>//获取窗口内部大小var width = window.innerWidth;var height = window.innerHeight;//用于重新计算窗口大小window.addEventListener('resize', ()=>{width = window.innerWidth;height = window.innerHeight;})//默认隐藏右键菜单hiddenRightMenu('right-menu');document.getElementById("test-area").addEventListener('contextmenu', (e) => {e.preventDefault(e);    //覆盖原生右键事件showRightMenu(e, 'right-menu');   //显示菜单})document.getElementById("test-area").addEventListener('click', (e) => {hiddenRightMenu('right-menu');})function showRightMenu(e, id) {var rightMenu = document.getElementById(id);if(e.clientY + 520 >= height){rightMenu.style.top = (height - 530) + "px";}else{rightMenu.style.top = e.clientY + "px";}if(e.clientX + 200 >= width){rightMenu.style.left = (width - 400) + "px";}else{rightMenu.style.left = e.clientX + "px";}// rightMenu.style.left = e.clientX + "px";// rightMenu.style.top = e.clientY + "px";rightMenu.style.display = 'block';}function hiddenRightMenu(id) {document.getElementById(id).style.display = 'none';}//二级菜单事件document.getElementById('generate-sql').addEventListener('mouseover', (e) => {document.getElementById('right-menu2').style.display = 'block';})document.getElementById('generate-sql').addEventListener('mouseout', (e) => {document.getElementById('right-menu2').style.display = 'none';})document.getElementById('copy').addEventListener('mouseover', (e) => {document.getElementById('right-menu3').style.display = 'block';})document.getElementById('copy').addEventListener('mouseout', (e) => {document.getElementById('right-menu3').style.display = 'none';})</script>
</body></html>

相关文章：

原生 HTML/CSS/JS 实现右键菜单和二级菜单

文章来源&#xff1a;www.huhailong.vip 站点 文章源地址&#xff1a;https://www.huhailong.vip/article/1764653112011841538 Demo效果演示地址 先看效果图 {{{width“auto” height“auto”}}} 需要注意的就是边界检测处理&#xff0c;到极端点击底部和右侧时如果不做处理会…...

编程日记 2024/3/26 5:54:22

[项目前置]如何用webbench进行压力测试

测试软件 采用webbench进行服务器性能测试。 Webbench是知名的网站压力测试工具&#xff0c;它是由Lionbridge公司开发。 webbench的标准测试可以向我们展示服务器的两项内容&#xff1a; 每秒钟相应请求数 和 每秒钟传输数据量 webbench测试原理是&#xff0c;创建指定数…...

编程日记 2024/3/26 5:52:20

网络七层模型：理解网络通信的架构（〇）

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2024/3/26 5:49:17

format(C++20)

1. std::format format_01.cpp // g format_01.cpp -stdc20 #include <iostream> #include <string> #include <format>void test_01() {// 使用字符串填充std::cout << std::format("Hello {}!\n", "World"); // Hello World!…...

编程日记 2024/3/26 5:48:16

Ftrans安全数据摆渡系统 构建便捷的内外网数据交换通道

安全数据摆渡系统是一种设计用于解决内外网环境下&#xff0c;数据传输、管理、共享问题的安全系统&#xff0c;通过加密、访问控制等策略&#xff0c;提供安全可靠的数据传输和共享服务&#xff0c;尤其适用于对网络安全建设要求高的行业&#xff0c;比如研发型企业、党政机构…...

编程日记 2024/3/26 5:47:15

【云开发笔记No.14】持续交付、持续部署、持续交付流水线

一、持续交付 持续交付&#xff08;Continuous Delivery&#xff09;是一种软件开发方法论&#xff0c;它强调在开发过程中&#xff0c;软件可以在任何时间以最小的努力被部署到生产环境。其核心是确保代码更改在经过一系列自动化测试后&#xff0c;能够快速、安全地集成到主代…...

编程日记 2024/3/26 5:46:14

蓝桥杯练习07小兔子爬楼梯

小兔子爬楼梯 介绍 小兔子想去月球上旅行&#xff0c;假设小兔子拥有一个阶梯子&#xff0c;当你爬完层就可以到达月球&#xff0c;小兔子每次可以跳1或者2个台阶&#xff0c;小兔子有多少种跳法可以到达月球呢&#xff1f; 给定n是一个正整数&#xff0c;代表梯子的阶数&…...

编程日记 2024/3/26 5:45:12

Docker in Docker原理与实战

Docker in Docker (DinD) 是一种在Docker容器内部运行Docker的技术。它允许在一个Docker容器内部创建和管理其他的Docker容器&#xff0c;实现了一个容器内部的容器编排环境。本文将介绍Docker in Docker的原理&#xff0c;并给出一个实际的应用场景。 Docker in Docker的原理…...

编程日记 2024/3/26 5:44:10

Ruoyi若依框架下载流程详细解读（SpringBoot-Vue）

图解&#xff1a; 前端设计&#xff1a; 前端设计一个link文字连接或者按钮&#xff08;ElementUI&#xff09;Element - The worlds most popular Vue UI framework 前端请求设计&#xff1a; import request from /utils/request //下载示例模型定义语言的JSON export const…...

编程日记 2024/3/26 5:43:09

【深度学习】Pytorch中实现交叉熵损失计算的方式总结

在PyTorch中&#xff0c;计算交叉熵损失主要有以下几种方式&#xff0c;它们针对不同的场景和需求有不同的实现方式和适用范围&#xff1a; 1. nn.CrossEntropyLoss 类 这是最常用且方便的方法&#xff0c;特别适用于多分类任务。nn.CrossEntropyLoss 实际上是同时完成了 sof…...

编程日记 2024/3/26 5:42:08

机器学习：处理jira工单的分类问题

如何根据jira工单的category、reporter自动找到处理它的组呢？这是一个利用机器学习中knn算法的小实践. 目录 Knn算法 数据 示例 分割数据 选择Neighbors knn的优缺点 机器学习是一种技术，它的目的是给机器学习能力，让它们可以根据数据自己做决定，所以对于训练…...

编程日记 2024/3/26 5:41:07

后端常问面经之操作系统

请简要描述线程与进程的关系,区别及优缺点&#xff1f; 本质区别&#xff1a;进程是操作系统资源分配的基本单位&#xff0c;而线程是任务调度和执行的基本单位 在开销方面&#xff1a;每个进程都有独立的代码和数据空间&#xff08;程序上下文&#xff09;&#xff0c;程序之…...

编程日记 2024/3/26 5:38:04

RK3568平台 iperf3测试网络性能

一.iperf3简介 iperf是一款开源的网络性能测试工具&#xff0c;主要用于测量TCP和UDP带宽性能。它可以在不同的操作系统上运行&#xff0c;包括Windows、Linux、macOS等。iperf具有简单易用、功能强大、高度可配置等特点&#xff0c;广泛应用于网络性能测试、网络故障诊断和网…...

编程日记 2024/3/26 5:37:03

Spring Boot中实现对特定URL的权限验证：拦截器、切面和安全框架的比较

引言&#xff1a; 在开发Web应用程序时&#xff0c;对特定URL进行权限验证是一项常见的需求。在Spring Boot中&#xff0c;我们有多种选择来实现这一目标&#xff0c;其中包括使用拦截器、切面和专门的安全框架&#xff08;如Spring Security&#xff09;。本文将比较这三种方式…...

编程日记 2024/3/26 5:35:01

【能源数据分析-00】能源领域数据集集锦（动态更新）

一、前言 大数据科学在能源领域的深度应用&#xff0c;已经深刻改变了这一行业的垂直格局。它为我们提供了宝贵的见解&#xff0c;帮助降低下游市场的成本&#xff0c;使石油生产商能够更好地应对市场繁荣期的需求。近期&#xff0c;石油价格的剧烈下跌给全球经济带来了沉重打…...

编程日记 2024/3/26 5:32:58

数据挖掘与机器学习 1. 绪论

于高山之巅&#xff0c;方见大河奔涌&#xff1b;于群峰之上&#xff0c;便觉长风浩荡 —— 24.3.24 一、数据挖掘和机器学习的定义 1.数据挖掘的狭义定义 背景&#xff1a;大数据时代——知识贫乏 数据挖掘的狭义定义&#xff1a; 数据挖掘就是从大量的、不完全的、有噪声的、…...

编程日记 2024/3/26 5:27:53

Matlab实现序贯变分模态分解（SVMD）

大家好&#xff0c;我是带我去滑雪&#xff01; 序贯变分模态分解(SVMD) 是一种信号处理和数据分析方法。它可以将复杂信号分解为一系列模态函数&#xff0c;每个模态函数代表信号中的特定频率分量。 SVMD 的主要目标是提取信号中的不同频率分量并将其重构为原始信号。SVMD的基…...

编程日记 2024/3/26 5:26:52

云安全与云计算的关系

云计算又被称为网格计算&#xff0c;是分布式计算的一种&#xff0c;能够将大量的数据计算处理程序通过网络“云”分解成多个小程序&#xff0c;然后将这些小程序的结果反馈给用户。云计算主要就是能够解决任务分发&#xff0c;并进行计算结果的合并。 云安全则是我国企业创造的…...

编程日记 2024/3/26 5:25:49

WPF 界面变量绑定（通知界面变化）

1、继承属性变化接口 public partial class MainWindow : Window, INotifyPropertyChanged {// 通知界面属性发生变化public event PropertyChangedEventHandler PropertyChanged;private void RaisePropertyChanged(string propertyName){PropertyChangedEventHandler handle…...

编程日记 2024/3/26 5:24:48

eclipse导入svn项目

1、配置maven 2、用svn引入项目 3一直点击next,到最后选完成。...

编程日记 2024/3/26 5:23:47

OpenClaw跨平台同步：Qwen3.5-9B维护多设备代码仓库

OpenClaw跨平台同步&#xff1a;Qwen3.5-9B维护多设备代码仓库 1. 多设备开发的痛点与解决方案 作为一名自由职业开发者&#xff0c;我经常需要在不同设备间切换工作——家里的台式机、咖啡馆的笔记本、客户现场的平板。最让我头疼的是代码版本管理&#xff1a;在A设备修改的…...

编程新知 2026/4/3 5:42:49

OpenClaw压力测试：Qwen3-14B持续运行24小时稳定性报告

OpenClaw压力测试&#xff1a;Qwen3-14B持续运行24小时稳定性报告 1. 测试背景与目标 上周在尝试用OpenClaw自动处理一批PDF文档时&#xff0c;遇到了一个奇怪的现象&#xff1a;连续运行4小时后&#xff0c;系统响应速度明显下降&#xff0c;甚至出现了几次任务中断。这让我…...

编程新知 2026/4/3 4:51:56

假芯片识别与防范：工程师实战指南

1. 假芯片泛滥&#xff1a;半导体行业的隐秘危机最近在调试一块电路板时&#xff0c;我发现一个奇怪的现象&#xff1a;明明使用的是同型号的MCU&#xff0c;但部分板子的功耗异常偏高。经过一周的排查&#xff0c;最终发现问题出在芯片上——我们采购到了一批"套牌"…...

编程新知 2026/4/3 4:29:36

家庭知识库中心：OpenClaw+Qwen3.5-9B管理个人数字资产

家庭知识库中心&#xff1a;OpenClawQwen3.5-9B管理个人数字资产 1. 为什么需要家庭知识库 去年搬家时&#xff0c;我在整理纸质文件的过程中发现一个严重问题&#xff1a;孩子的疫苗接种记录、房产合同、医疗报告等重要文档分散在多个文件夹中&#xff0c;紧急情况下根本找不…...

编程新知 2026/4/3 2:46:12

探索高压柔性输电系统中6脉冲与12脉冲晶闸管控制HVDC仿真模型

高压柔性输电系统6脉冲&#xff0c;12脉冲晶闸管控制HVDC的仿真模型&#xff0c;说明文档在电力传输领域&#xff0c;高压柔性输电系统&#xff08;HVDC&#xff09;以其高效、灵活等特性占据着重要地位。其中&#xff0c;6脉冲和12脉冲晶闸管控制的HVDC仿真模型更是关键部分&a…...

编程新知 2026/4/3 2:38:02

G-Helper终极指南：华硕笔记本轻量级控制工具完全教程

G-Helper终极指南&#xff1a;华硕笔记本轻量级控制工具完全教程 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF, Strix, Sca…...

编程新知 2026/4/3 2:36:00

思维重构：三月七小助手如何重新定义星穹铁道游戏体验

思维重构&#xff1a;三月七小助手如何重新定义星穹铁道游戏体验 【免费下载链接】March7thAssistant 崩坏&#xff1a;星穹铁道全自动 三月七小助手 项目地址: https://gitcode.com/gh_mirrors/ma/March7thAssistant 在《崩坏&#xff1a;星穹铁道》的世界里&#xff0…...

编程新知 2026/4/3 2:25:48

zotero使用记录

写在前面&#xff0c;我之前阅读文献使用endnote,仅仅使用他管理文献&#xff0c;然后使用豆包辅助阅读(翻译&#xff0c;搜索&#xff0c;总结&#xff0c;提问(看不懂的地方、公式推导都可以问))&#xff0c;最后使用vscode 编辑markdown 记笔记&#xff1b;这样一个流程看起…...

编程新知 2026/4/3 1:49:11

Python AOT编译成本如何从$280K/年压至$49K/年？2026前最后窗口期的6个不可逆决策点

第一章&#xff1a;Python AOT编译成本断崖式下降的战略本质Python 长期以来被诟病于运行时开销高、启动慢、内存占用大&#xff0c;其核心瓶颈在于 CPython 解释器的字节码解释执行机制。而近年来&#xff0c;以 Nuitka、Cython&#xff08;搭配 --aot 模式&#xff09;、以及…...

编程新知 2026/4/3 1:26:44

OpenClaw+Qwen3-14b_int4_awq：跨平台文件同步助手

OpenClawQwen3-14b_int4_awq&#xff1a;跨平台文件同步助手 1. 为什么需要智能文件同步 上周我差点犯了个职场大错——把包含客户联系方式的Excel表格同步到了公共网盘。这件事让我意识到&#xff1a;传统的文件同步工具就像个"搬运工"&#xff0c;它分不清哪些文…...

编程新知 2026/4/3 1:24:43