react 自定义鼠标右键点击事件

功能:鼠标右键点击节点时,出现“复制”功能,点击其他部位,隐藏“复制”;鼠标右键事件的文案,始终在鼠标点击位置的右下方;点击复制,提示复制成功
效果图:在这里插入图片描述
代码:

const [showRight,setShowRight] = useState(false);
const contextMenu = useRef(null); 
const [clickX,setClickX] = useState('0px');
const [clickY,setClickY] = useState('0px');------------<div className='topology-node' onContextMenu={(e)=> handleRight(e)} >这里面是图中的节点,只有右键双击图中节点,才会触发自定义的右键事件功能
</div>------------// 鼠标右键展示的内容,注意这里的样式rightStyle,鼠标右键时菜单的位置(图中“复制”的位置)就是靠这个样式控制的
{showRight&&<div className='right-panel' onClick={handleRightCopy} style={rightStyle}>复制</div>}------------useEffect(()=>{// 监听其他地方的点击事件document.addEventListener('click', _handleClick);
})------------// 事件
const handleRight =(event:any) =>{setShowRight(true)// event.clientX event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标)setClickX(event.clientX);  setClickY(event.clientY);
}
// 右键菜单的位置,加减多少看自己,位置看着舒服就行
const rightStyle = {left:`${clickX + 5}px`,top: `${clickY + 5}px`
}
const _handleClick =(event:any)=>{const wasOutside = !(event.target.contains === contextMenu);// 点击其他位置需要隐藏右键菜单if (wasOutside) setShowRight(false);
}
const handleRightCopy =()=>{console.log('点击了复制');message.success('复制成功')
}

css

// 样式可以自定义
.right-panel{width: 100px;z-index:10;position: fixed;background-color: pink;cursor: pointer;
}

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

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

相关文章

DGit介绍

参考地址&#xff1a;http://githubengineering.com/introducing-dgit/ DGit是“Distributed Git”的简写&#xff0c;即分布式Git。 众所周知&#xff0c;Git本身就是分布式的&#xff0c;任何的Git仓库备份都是包含该项目所有历史版本的所有的文件&#xff0c;分支&#xff…

MySQL之优化服务器设置(五)

优化服务器设置 高级InnoDB设置 innodb_old_blocks_time InnoDB有两段缓冲池LRU(最近最少使用)链表&#xff0c;设计目的是防止换出长期很多次的页面。像mysqldump产生的这种一次性的(大)查询&#xff0c;通常会读取页面到缓冲池的LRU列表&#xff0c;从中读取需要的行&…

【对抗去偏】BiasAdv: Bias-Adversarial Augmentation for Model Debiasing

原文标题&#xff1a; BiasAdv: Bias-Adversarial Augmentation for Model Debiasing 原文代码&#xff1a; 暂无 发布年度&#xff1a; 2023 发布期刊&#xff1a; CVPR 摘要 Neural networks are often prone to bias toward spurious correlations inherent in a dataset, …

苹果手机短信删除了怎么恢复?有那些方法?

IPhone短信删除怎么恢复&#xff1f;现在大多数人都会使用社交软件沟通交流&#xff0c;短信的用武之地已经没以前那么多&#xff0c;但是它的重要性一点都不能忽视&#xff0c;有些重要的短信内容值得我们保留&#xff0c;如果不小心删除了这些短信内容该怎么恢复&#xff1f;…

摊牌了,我不装了~各种Amazon Bedrock小样儿、试用装,今天免费!

探索世界顶级的大模型、智能体、文生图、对话机器人……新手&#xff1f;还是专家&#xff1f;加入我们&#xff0c;解锁精彩内容&#xff1a; l 初体验&#xff1a;在 Amazon Bedrock Playground 直接调用强大的大模型&#xff0c;点亮生成式AI技能树。 l 文生图&#xff1a…

Android系统 抓trace方法(手机及车机)

1、先说说什么是trace trace是一种以perfetto.trace结尾的文件。一般用来分析卡顿、启动时间慢等问题&#xff0c;还可以用来分析方法耗时&#xff0c;android系统的性能、功耗等等问题。所需要使用到的网站是&#xff1a; Perfetto UI 他的前身是Systrace&#xff0c;不过Pe…

探索图神经网络(GNN):使用Python实现你的GNN模型

一、引言 图神经网络&#xff08;Graph Neural Network, GNN&#xff09;作为近年来机器学习和深度学习领域的热门话题&#xff0c;正逐渐吸引越来越多的研究者和开发者的关注。GNN能够处理图结构数据&#xff0c;在社交网络分析、推荐系统、化学分子结构预测等领域有着广泛的…

二本(三本)毕业、4年职场牛马----分享给计科专业男女孩或被迷茫、焦虑困扰的大学生们的一些感悟

背景 我不是一个贩卖焦虑的博主&#xff0c;博主二本&#xff08;三本升上来&#xff09;毕业&#xff0c;当年正逢2020疫情&#xff0c;一战考研失败&#xff0c;家里蹲到没有实习。靠关系进第一家公司做Python后端&#xff0c;然后第一家公司因为疫情黄了。二战考研又失败&a…

eNSP学习——OSPF在帧中继网络中的配置

目录 主要命令 原理概述 实验目的 实验场景 实验拓扑 实验编址 实验步骤 1、基本配置 2、在帧中继上搭建OSPF网络 主要命令 //检查帧中继的虚电路状态 display fr pvc-info//检查帧中继的映射表 display fr map-info//手工指定OSPF邻居,采用单播方式发送报文 [R1]os…

课程管理系统

摘 要 在大学里&#xff0c;课程管理是一件非常重要的工作&#xff0c;教学工作人员每天都要与海量的数据和信息打交道。确保数据的精确度和完整程度&#xff0c;影响着每一位同学的学习、生活和各种活动的正常展开&#xff0c;更合理的信息管理也为高校工作的正规化运行和规范…

QThread 与QObject::moveToThread在UI中的应用

1. QThread的两种用法 第一种用法就是继承QThread&#xff0c;然后覆写 virtual void run()&#xff0c; 这种用法的缺点是不能利用信号槽机制。 第二种用法就是创建一个线程&#xff0c;创建一个对象&#xff0c;再将对象moveToThread, 这种可以充分利用信号槽机制&#xff…

Docker:Harbor

目录 一、Harbor介绍 二、安装 Harbor 2.1 环境准备 2.2下载 Harbor 3.3 修改配置&#xff08;可选&#xff09; 3.4 启动 Harbor 3.5访问 Harbor 三、使用 Harbor 3.1 管理Harbor 一、Harbor介绍 Docker Harbor 是由 VMware 公司开源的一款企业级的 Docker Registry …

基于JSP技术的个性化影片推荐系统

开头语&#xff1a;你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有相关需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSPServlet 工具&#xff1a;MyEclipse、Tomcat、MySQL 系统展示 首页 …

kafka的基本模型

kafka官网 线程和线程之间的数据交互 在jvm里不同的线程有自己的栈内存&#xff0c;但彼此之间交互可以在共享的内存中进行&#xff0c;即堆内存&#xff0c;堆内存会将这些消息放到队列中&#xff0c;具体实现jvm见&#xff0c;栈内存各自维护&#xff0c;堆内存大家共享 进…

DLS平台:美联储松绑预期升温,金价飙升至2365美元

摘要 美联储鹰派官员古尔斯比对降息态度有所松动&#xff0c;导致金价一度升至2365美元。市场对美联储未来的货币政策预期有所改变&#xff0c;黄金作为避险资产的吸引力增强。本文将详细分析美联储官员态度变化对金价的影响、当前市场对黄金的预期及其未来走势。 美联储官员态…

Pyqt QCustomPlot 简介、安装与实用代码示例(二)

目录 前言实用代码示例彩色图演示散点像素图演示实时数据演示多轴演示对数轴演示 结语 所有文章除特别声明外&#xff0c;均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 nixgnauhcuy’s blog&#xff01; 如需转载&#xff0c;请标明出处&#xff01; 完整代码我已经上传到…

第 402 场 LeetCode 周赛题解

A 构成整天的下标对数目 I 计数&#xff1a;遍历 h o u r s hours hours &#xff0c;记录 h o u r s [ i ] % 24 hours[i]\%24 hours[i]%24 的出现次数 class Solution {public:long long countCompleteDayPairs(vector<int>& hours) {vector<int> cnt(24);…

【小白专用 已验证24.6.18】C# SqlSugar操作MySQL数据库实现增删改查

【小白专用24.6.18】C# SqlSugar&#xff1a;连接数据库实现简单的&#xff0c;增、删、改、查-CSDN博客 SqlSugar .Net ORM 5.X 官网 、文档、教程 - SqlSugar 5x - .NET果糖网 SqlSugar项目创建 通过NuGet包管理器搜索SqlSugar&#xff08;MySql还要安装MySql.Data、Newton…

如何计算 GPT 的 Tokens 数量?

基本介绍 随着人工智能大模型技术的迅速发展&#xff0c;一种创新的计费模式正在逐渐普及&#xff0c;即以“令牌”&#xff08;Token&#xff09;作为衡量使用成本的单位。那么&#xff0c;究竟什么是Token呢&#xff1f; Token 是一种将自然语言文本转化为计算机可以理解的…

【Linux】进程信号2——阻塞信号,捕捉信号

1.阻塞信号 1.1. 信号其他相关常见概念 在开始内容之前&#xff0c;先介绍一些信号的专业名词&#xff1a; 实际执行信号的处理动作称为信号递达&#xff08;Delivery&#xff09;信号从产生到递达之间的状态&#xff0c;称为信号未决&#xff08;Pending&#xff09;&#…