HTML中自定义鼠标右键菜单

今天突然有人跟我提到了HTML中如何自定义鼠标右键菜单，这里大概记录一下吧，方便下次直接复制。免得还去看API文档。

文章目录

  • HTML中自定义鼠标右键菜单
    • 结果如下所示
    • 可以稍微改一下鼠标悬浮到右键菜单时的样式
    • 结果如下所示
  • 只在某个特定的div才可以显示右键菜单
    • 结果如下所示
  • 在多个特定的div中都可以显示右键菜单
    • 结果如下所示

HTML中自定义鼠标右键菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标右键菜单示例</title><style>.context-menu {display: none;position: absolute;background-color: #fff;border: 1px solid #ccc;min-width: 100px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);z-index: 999;}.context-menu-item {padding: 5px 10px;cursor: pointer;}</style>
</head>
<body><div id="contextMenu" class="context-menu"><div class="context-menu-item" onclick="handleItemClick('复制')">复制</div><div class="context-menu-item" onclick="handleItemClick('粘贴')">粘贴</div><div class="context-menu-item" onclick="handleItemClick('剪切')">剪切</div>
</div><script>document.addEventListener('contextmenu', function (e) {e.preventDefault(); // 阻止默认右键菜单var menu = document.getElementById('contextMenu');menu.style.display = 'block';menu.style.left = `${e.pageX}px`;menu.style.top = `${e.pageY}px`;});document.addEventListener('click', function () {document.getElementById('contextMenu').style.display = 'none'; // 点击页面其他地方隐藏菜单});function handleItemClick(itemName) {console.log(`用户点击了菜单项：${itemName}`);// 在此处添加实际的业务逻辑，如执行复制、粘贴或剪切操作switch (itemName) {case '复制':// 执行复制操作...break;case '粘贴':// 执行粘贴操作...break;case '剪切':// 执行剪切操作...break;}document.getElementById('contextMenu').style.display = 'none'; // 点击菜单项后隐藏菜单}
</script></body>
</html>

结果如下所示

在这里插入图片描述
在这个例子中，当用户在网页上右键点击时，会显示一个自定义菜单。并在点击菜单项时执行相应的函数。这个就要根据自己具体的实际场景中实现了。

可以稍微改一下鼠标悬浮到右键菜单时的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标右键菜单示例</title><style>.context-menu {display: none;position: absolute;background-color: #fff;border: 1px solid #ccc;min-width: 100px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);z-index: 999;}.context-menu-item {padding: 5px 10px;cursor: pointer;}.context-menu-item:hover {background-color: #e6f7ff;}</style>
</head>
<body><div id="contextMenu" class="context-menu"><div class="context-menu-item" onclick="handleItemClick('复制')">复制</div><div class="context-menu-item" onclick="handleItemClick('粘贴')">粘贴</div><div class="context-menu-item" onclick="handleItemClick('剪切')">剪切</div>
</div><script>document.addEventListener('contextmenu', function (e) {e.preventDefault(); // 阻止默认右键菜单var menu = document.getElementById('contextMenu');menu.style.display = 'block';menu.style.left = `${e.pageX}px`;menu.style.top = `${e.pageY}px`;});document.addEventListener('click', function () {document.getElementById('contextMenu').style.display = 'none'; // 点击页面其他地方隐藏菜单});function handleItemClick(itemName) {console.log(`用户点击了菜单项：${itemName}`);// 在此处添加实际的业务逻辑，如执行复制、粘贴或剪切操作switch (itemName) {case '复制':// 执行复制操作...break;case '粘贴':// 执行粘贴操作...break;case '剪切':// 执行剪切操作...break;}document.getElementById('contextMenu').style.display = 'none'; // 点击菜单项后隐藏菜单}
</script></body>
</html>

结果如下所示

在这里插入图片描述

只在某个特定的div才可以显示右键菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标右键菜单示例</title><style>.context-menu {display: none;position: absolute;background-color: #fff;border: 1px solid #ccc;min-width: 100px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);z-index: 999;}.context-menu-item {padding: 5px 10px;cursor: pointer;}.context-menu-item:hover {background-color: #f5f5f5;}</style>
</head>
<body><div id="targetDiv" style="width: 300px; height: 300px; background-color: #eee;">右键点击我显示自定义菜单
</div><div id="contextMenu" class="context-menu"><div class="context-menu-item" onclick="handleItemClick('复制')">复制</div><div class="context-menu-item" onclick="handleItemClick('粘贴')">粘贴</div><div class="context-menu-item" onclick="handleItemClick('剪切')">剪切</div>
</div><script>const targetDiv = document.getElementById('targetDiv');targetDiv.addEventListener('contextmenu', function (e) {e.preventDefault(); // 阻止默认右键菜单if (e.target === targetDiv) { // 只有当点击的目标是目标div时才显示菜单var menu = document.getElementById('contextMenu');menu.style.display = 'block';menu.style.left = `${e.pageX}px`;menu.style.top = `${e.pageY}px`;}});document.addEventListener('click', function () {document.getElementById('contextMenu').style.display = 'none'; // 点击页面其他地方隐藏菜单});function handleItemClick(itemName) {console.log(`用户点击了菜单项：${itemName}`);// 在此处添加实际的业务逻辑，如执行复制、粘贴或剪切操作switch (itemName) {case '复制':// 执行复制操作...break;case '粘贴':// 执行粘贴操作...break;case '剪切':// 执行剪切操作...break;}document.getElementById('contextMenu').style.display = 'none'; // 点击菜单项后隐藏菜单}
</script></body>
</html>

结果如下所示

在这里插入图片描述
在这个例子中，右键菜单只会出现在具有ID为targetDiv的div元素上。当用户在其他位置右键点击时，不会显示自定义菜单。

在多个特定的div中都可以显示右键菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标右键菜单示例</title><style>.context-menu {display: none;position: absolute;background-color: #fff;border: 1px solid #ccc;min-width: 100px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);z-index: 999;}.context-menu-item {padding: 5px 10px;cursor: pointer;}.context-menu-item:hover {background-color: #24d0d6;}</style>
</head>
<body><div id="targetDiv1" class="target-divs" style="width: 300px; height: 300px; background-color: #eee;">右键点击我显示自定义菜单
</div><div id="targetDiv2" class="target-divs" style="width: 300px; height: 300px; background-color: #ddd;">右键点击我显示自定义菜单
</div><div id="contextMenu" class="context-menu"><div class="context-menu-item" onclick="handleItemClick('复制')">复制</div><div class="context-menu-item" onclick="handleItemClick('粘贴')">粘贴</div><div class="context-menu-item" onclick="handleItemClick('剪切')">剪切</div>
</div><script>const targetDivs = document.getElementsByClassName('target-divs');for (const div of targetDivs) {div.addEventListener('contextmenu', function (e) {e.preventDefault(); // 阻止默认右键菜单var menu = document.getElementById('contextMenu');menu.style.display = 'block';menu.style.left = `${e.pageX}px`;menu.style.top = `${e.pageY}px`;});}document.addEventListener('click', function () {document.getElementById('contextMenu').style.display = 'none'; // 点击页面其他地方隐藏菜单});function handleItemClick(itemName) {console.log(`用户点击了菜单项：${itemName}`);// 在此处添加实际的业务逻辑，如执行复制、粘贴或剪切操作switch (itemName) {case '复制':// 执行复制操作...break;case '粘贴':// 执行粘贴操作...break;case '剪切':// 执行剪切操作...break;}document.getElementById('contextMenu').style.display = 'none'; // 点击菜单项后隐藏菜单}
</script></body>
</html>

结果如下所示

在这里插入图片描述
在这个例子中，我们首先通过类名target-divs获取所有需要添加右键菜单功能的div元素，然后遍历这个集合，为每个元素添加右键菜单事件监听器。这样，在任何具有target-divs类名的div上右键点击时都会显示自定义菜单。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/718043.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

javascript 的eval()和with是干嘛的

javascript 的eval()和with是干嘛的

原来JavaScript 中的eval() 和 with 是两个强大的功能&#xff0c;但同时它们也具有潜在风险的特性&#xff0c;所以谨慎使用。 首先说说eval() 函数&#xff1a; 它接收一个字符串参数&#xff0c;并将其作为 JavaScript 代码来解析和执行。 这意味着你可以使用 eval() 动态地…
阅读更多...
《Scratch等级认证CCF-GESP真题解析》专栏总目录

《Scratch等级认证CCF-GESP真题解析》专栏总目录

❤️ 专栏名称：《Scratch等级认证CCF-GESP真题解析》 🌸 专栏介绍：中国计算机学会GESP《CCF编程能力等级认证》Scratch图形化编程（1~4级）历届真题解析。 🚀 订阅专栏：订阅后可阅读专栏内所有真题解析，真题持续更新中，限时9.9元，欢迎订阅！ Scratch图形化编程一级 序…
阅读更多...
2368. 受限条件下可到达节点的数目

2368. 受限条件下可到达节点的数目

2368. 受限条件下可到达节点的数目 题目链接&#xff1a;2368. 受限条件下可到达节点的数目 代码如下&#xff1a; //深度优先遍历 //参考&#xff1a;https://leetcode.cn/problems/reachable-nodes-with-restrictions/solutions/2662538/shu-shang-dfspythonjavacgojsrust-…
阅读更多...
C++自学精简实践教程

C++自学精简实践教程

一、介绍 1.1 教程特点 一篇文章从入门到就业有图有真相&#xff0c;有测试用例&#xff0c;有作业&#xff1b;提供框架代码&#xff0c;作业只需要代码填空规范开发习惯&#xff0c;培养设计能力 1.2 参考书 唯一参考书《C Primer 第5版》​参考书下载&#xff1a; 蓝奏云…
阅读更多...
Acwing---3777. 砖块

Acwing---3777. 砖块

砖块 1.题目2.基本思想3.代码实现 1.题目 n 个砖块排成一排&#xff0c;从左到右编号依次为 1∼n。 每个砖块要么是黑色的&#xff0c;要么是白色的。 现在你可以进行以下操作若干次&#xff08;可以是 0 次&#xff09;&#xff1a; 选择两个相邻的砖块&#xff0c;反转它…
阅读更多...
STL——stack

STL——stack

目录 stack stack都有哪些接口 模拟实现一个stack stack 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。 2. stack是作为容器适配器被实现的&#xff0c;容器适配器即…
阅读更多...
数据分析-Pandas数据的画图设置

数据分析-Pandas数据的画图设置

数据分析-Pandas数据的画图设置 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff1f; 数据表&#x…
阅读更多...
春招！启动了

春招！启动了

大家好&#xff0c;我是洋子。今年的春招很多企业已经开始招聘了&#xff0c;像美团今年继续发力&#xff0c;24届春招以及25届暑期转正实习一共招聘4000人。另外&#xff0c;阿里&#xff0c;京东&#xff0c;顺丰等公司也已经开始春招&#xff0c;可以说招聘的号角已经正式吹…
阅读更多...
GO语言学习笔记(与Java的比较学习)（十）

GO语言学习笔记(与Java的比较学习)（十）

错误处理与测试 Go 没有像 Java 和 .NET 那样的 try/catch 异常机制&#xff1a;不能执行抛异常操作。但是有一套 defer-panic-and-recover 机制 错误处理 Go 有一个预先定义的 error 接口类型 type error interface {Error() string } errors 包中有一个 errorString 结构…
阅读更多...
十二、类与声明

十二、类与声明

类与声明 什么是类&#xff1f; 前情总结 前面22讲的课基本上就做了两件事 学习C#的基本元素学习类的成员 析构函数&#xff1a; 当对象不再被引用的时候&#xff0c;就会被垃圾回收器gc&#xff0c;回收。而收回的过程当中&#xff0c;如果需要做什么事情&#xff0c;就放在…
阅读更多...
远程调用--Http Interface

远程调用--Http Interface

远程调用--Http Interface 前言1、导入依赖2、定义接口3 创建代理&测试4、创建成配置变量 前言 这个功能是spring boot6提供的新功能&#xff0c;spring允许我们通过自定义接口的方式&#xff0c;给任意位置发送http请求&#xff0c;实现远程调用&#xff0c;可以用来简化…
阅读更多...
已解决org.springframework.dao.DataRetrievalFailureException数据检索失败异常的正确解决方法，亲测有效！！！

已解决org.springframework.dao.DataRetrievalFailureException数据检索失败异常的正确解决方法，亲测有效！！！

已解决org.springframework.dao.DataRetrievalFailureException数据检索失败异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 出现问题的场景 报错原因 解决思路 解决方法 总结 在使用Spring Framework进行数据库操作时&…
阅读更多...
关于硅金属电阻器？

关于硅金属电阻器？

EAK金属硅电阻器类似于陶瓷复合电阻器&#xff0c;在脉冲负载方面具有优势&#xff0c;需要高峰值功率或高电压与低电感&#xff08;如预充电电路&#xff09;的组合。硅金属电阻器具有更高的连续额定温度&#xff0c;为 350C&#xff0c;而陶瓷电阻器为 250C。这种扩展的温度范…
阅读更多...
[蓝桥杯 2023 省 B] 冶炼金属

[蓝桥杯 2023 省 B] 冶炼金属

P9240 [蓝桥杯 2023 省 B] 冶炼金属 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 参考题解&#xff1a; #C3150——蓝桥杯2023年第十四届省赛真题-冶炼金属(分块)-Dotcpp编程社区 https://www.bilibili.com/video/BV1wc411x7KU/?spm_id_from333.1007.top_right_bar_windo…
阅读更多...
RT-Thread操作系统 串口DMA接收时数据被拆分多包

RT-Thread操作系统 串口DMA接收时数据被拆分多包

一、问题现象 在使用RT Thread操作系统&#xff0c;串口DMA接收数据时&#xff0c;通过log打印发现&#xff0c;例如GPS NEMA数据一包数据量较大或者时&#xff0c;接收到的数据被拆分多包处理&#xff1b; 二、问题解决方案 修改DMA驱动程序 在drivers/drv_usart.c中屏蔽如…
阅读更多...
板子合集1.0

板子合集1.0

版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。 原文链接&#xff1a;https://blog.csdn.net/JK01WYX/ 文章目录 1.快速幂板子2.gcd得最大公约数3.堆优化的dijkstra板子4.线段树1板子 区间加线段…
阅读更多...
中缀表达式转换逆波兰式(后缀表达式)

中缀表达式转换逆波兰式(后缀表达式)

算法思路来自于王道的数据结构 #include <iostream> #include <stack> #include <map>using namespace std; string eq; stack<char> op; string rst ""; map<char, int> dict;// 获取优先级 int getPrio(char op) {if (op )return …
阅读更多...
【Dubbo专栏 01 】深入探索：dubbo的架构是什么？

【Dubbo专栏 01 】深入探索：dubbo的架构是什么？

文章目录 Dubbo&#xff1a;深入解析分布式服务框架的核心概念与实现01 Dubbo简介02 Dubbo核心概念2.1 服务提供者&#xff08;Provider&#xff09;2.2 服务消费者&#xff08;Consumer&#xff09;2.3 注册中心&#xff08;Registry&#xff09;2.4 负载均衡&#xff08;Load…
阅读更多...
如何对用OpenCV开发的API进行测试 （Google Test 版本）

如何对用OpenCV开发的API进行测试 （Google Test 版本）

如何对用OpenCV开发的API进行测试 &#xff08;Google Test 版本&#xff09; 如何对用OpenCV开发的API进行测试断言介绍断言基础的断言数值比较字符串比较 如何对用OpenCV开发的API进行测试 假设你想测试一个使用OpenCV开发的图像处理API&#xff0c;例如一个图像滤波函数。以…
阅读更多...
SWC Runnable

SWC Runnable

runnable概念 runnable是编写应用程序行为逻辑的 SWC 的一部分。Runnable 类似于 C 中的函数，类似RTOS中的task，程序运行的实体，swc的灵魂。在 AUTOSAR 中，我们在配置期间在 SWC 中创建 Runnable，并且 在 SWC 的相应源文件中生成Runnable 或函数骨架。骨架函数的名称与我…
阅读更多...
最新文章

Copyright @ 2022~2023