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

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

news 2025/11/10 20:51:04

文章来源：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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/10/17 16:01:19

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/9/23 9:00:33

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/8/5 19:18:33

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/11/7 20:30:32

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2025/11/7 20:31:22

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/11/7 20:30:51

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/11/8 4:06:51

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2025/11/8 6:45:42