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

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

news 2026/2/10 19:18:12

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

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/12/21 20:15:17

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2026/2/3 22:50:06

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2026/2/8 14:19:47

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2026/1/29 5:39:49

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28

【FTP】ftp文件传输会丢包吗？批量几百个文件传输，有一些文件没有传输完整，如何解决？

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

编程新知 2025/8/17 3:31:21

结构化文件管理实战：实现目录自动创建与归类

手动操作容易因疲劳或疏忽导致命名错误、路径混乱等问题&#xff0c;进而引发后续程序异常。使用工具进行标准化操作&#xff0c;能有效降低出错概率。 需要快速整理大量文件的技术用户而言&#xff0c;这款工具提供了一种轻便高效的解决方案。程序体积仅有 156KB&#xff0c;…...

编程新知 2026/2/7 12:58:21

Python 解释器安装全攻略（适用于 Linux / Windows / macOS）

目录 一、Windows安装Python解释器1.1 下载并安装Python解释1.2 测试安装是否成功1.3 设置pip的国内镜像------永久配置 二、macOS安装Python解释器三、Linux下安装Python解释器3.1 Rocky8.10/Rocky9.5安装Python解释器3.2 Ubuntu2204/Ubuntu2404安装Python解释器3.3 设置pip的…...

编程新知 2026/2/5 9:28:03