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,一经查实,立即删除!

相关文章

C++自学精简实践教程

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

STL——stack

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

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

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

春招!启动了

大家好&#xff0c;我是洋子。今年的春招很多企业已经开始招聘了&#xff0c;像美团今年继续发力&#xff0c;24届春招以及25届暑期转正实习一共招聘4000人。另外&#xff0c;阿里&#xff0c;京东&#xff0c;顺丰等公司也已经开始春招&#xff0c;可以说招聘的号角已经正式吹…

十二、类与声明

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

远程调用--Http Interface

远程调用--Http Interface 前言1、导入依赖2、定义接口3 创建代理&测试4、创建成配置变量 前言 这个功能是spring boot6提供的新功能&#xff0c;spring允许我们通过自定义接口的方式&#xff0c;给任意位置发送http请求&#xff0c;实现远程调用&#xff0c;可以用来简化…

关于硅金属电阻器?

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

板子合集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 …

SWC Runnable

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

【硬件工程师面经整理15_低通/高通/带通滤波器】

低通/高通/带通滤波器 1.1 低通滤波器1.2 高通滤波器1.3 带通滤波器 1.1 低通滤波器 【定义】电感阻止高频信号通过而允许低频信号通过&#xff0c;电容的特性却相反。信号能够通过电感的滤波器、或者通过电容连接到地的滤波器对于低频信号的衰减要比高频信号小&#xff0c;称…

第二篇【传奇开心果系列】Python的自动化办公库技术点案例示例:深度解读Pandas金融数据分析

传奇开心果博文系列 系列博文目录Python的自动化办公库技术点案例示例系列 博文目录前言一、Pandas 在金融数据分析中的常见用途和功能介绍二、金融数据清洗和准备示例代码三、金融数据索引和选择示例代码四、金融数据时间序列分析示例代码五、金融数据可视化示例代码六、金融数…

最新版风车IM通讯iosapph5三端源码及视频教程

最新版风车IM通讯iosapph5三端源码及视频教程 1.宝塔环境如下: Nginx 1.20 Tomcat 8 MySQL 8.0 Redis 7 2.放行端口如下&#xff1a; 666 6600 6700 7000&#xff08;用作前端&#xff09; 7001&#xff08;用作后端&#xff09; 3.宝塔数据库添加数据库旁边有个ro…

Sqli-labs靶场第21、22关详解[Sqli-labs-less-21、22]自动化注入-SQLmap工具注入|sqlmap跑base64加密

Sqli-labs-Less-21、22 由于21/22雷同&#xff0c;都是需要登录后&#xff0c;注入点通过Cookie值进行测试&#xff0c;值base64加密 修改注入数据 选项&#xff1a;--tamperbase64encode #自动化注入-SQLmap工具注入 SQLmap用户手册&#xff1a;文档介绍 - sqlmap 用户手册 由…

MySql行子查询

目录 行子查询数据准备 行子查询 子查询返回的结果是一行(可以是多列)&#xff0c;这种子查询称为行子查询。 常用的操作符&#xff1a; 、<> 、IN 、NOT IN 案例&#xff1a;查询与"韦一笑"的入职日期及职位都相同的员工信息 可以拆解为两步进行&#xff1…

框架漏洞-->Struts2 Docker_Vulnhub搭建

来浅浅的讲一下Struts2漏洞 目录 1.Docker_Vulnhub搭建 2.Struts2 3.Struts2的框架特征 4.S2-029-->Remote Code Execution 5.漏洞复现 1.RCE 2.Getshell 1.Docker_Vulnhub搭建 因为我用的是Linux&#xff0c;所以我选择直接搭个docker&#xff0c;这里我建议先换个…

在Ubuntu22.04安装Fcitx5中文输入法教程(十分详细)

前言 书接上回&#xff0c;一时兴起将主力机的 Ubuntu 20.04 LTS 升级至了刚刚发布的 22.04 LTS。从 X 切换到 Wayland 、GNOME 从 3.36 升级至 42、Python 默认为 3.10 等等……使用太新的软件包反而暂时带来了麻烦&#xff0c;部分原有的软件和插件都不可用了。这其中就包括…

【AI Agent系列】【MetaGPT多智能体学习】7. 剖析BabyAGI:原生多智能体案例一探究竟(附简化版可运行代码)

本系列文章跟随《MetaGPT多智能体课程》&#xff08;https://github.com/datawhalechina/hugging-multi-agent&#xff09;&#xff0c;深入理解并实践多智能体系统的开发。 本文为该课程的第四章&#xff08;多智能体开发&#xff09;的第五篇笔记。今天我们拆解一个之前提到…

Docker之数据卷

文章目录 一、什么是数据卷二、自定义镜像 一、什么是数据卷 1.1Docker 数据管理 在生产环境中使用 Docker &#xff0c;往往需要对数据进行持久化&#xff0c;或者需要在多个容器之间进行 数据共享&#xff0c;这必然涉及容器的数据管理操作 1.2操作 将宿主机的目录与容器的目…

使用DockerFile构建Tomcat镜像

1、准备镜像文件tomcat压缩包&#xff0c;jdk的压缩包 tomcat链接&#xff1a;https://pan.baidu.com/s/1Xpecb-BSGR2sdxSL7FDtBw?pwd1234 提取码&#xff1a;1234 jdk链接&#xff1a;https://pan.baidu.com/s/1mQHInn27j1I9uuuicBsyAA?pwd1234 提取码&#xff1a;1234 …