react组件内添加一个全局点击时间,点击函数能区分是否是某个特定的id的dom触发的

在 React 组件内添加一个全局点击事件,并判断是否是某个特定 id 的 DOM 触发,可以这样实现:

实现思路

  1. 在组件 mount 时(useEffect),用document.addEventListener注册全局点击事件。
  2. 回调函数中通过event.target判断是否点到了特定 id 元素或其内部。
  3. 组件卸载时移除事件监听器。

示例代码

importReact,{useEffect}from"react";constTARGET_ID="my-special-id";functionMyComponent(){useEffect(()=>{consthandleClick=(event)=>{// 判断点击的元素或者其祖先是否包含指定 idletel=event.target;letisTarget=false;while(el){if(el.id===TARGET_ID){isTarget=true;break;}el=el.parentElement;}if(isTarget){console.log("点击了指定id元素或其内部");}else{console.log("点击了其它部分");}};document.addEventListener('click',handleClick);// 清理return()=>{document.removeEventListener('click',handleClick);};},[]);return(<div><div id={TARGET_ID}><p>点我或者我的子元素会触发特殊逻辑</p><button>我是子按钮</button></div><div><p>点我触发普通逻辑</p></div></div>);}exportdefaultMyComponent;

重点说明

  1. 使用id判断
    可以直接用element.id判断。如果有嵌套元素,需用 while 循环往上查找祖先节点(避免只点击父容器才有效)。

  2. 兼容性
    event.targetparentElement在现代浏览器都支持。

  3. 解绑事件
    组件卸载时务必解绑事件,避免内存泄漏。


如果你只想判断是否直接点到了特定 id(不包括子元素)

直接比较:

if(event.target.id===TARGET_ID)

但一般为方便,推荐判断祖先节点(事件冒泡场景)。


如有更复杂的需求可继续补充!

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

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

相关文章

.NET 某RFID标签打印客户端 崩溃分析

崩溃分析1. 为什么会崩溃双击打开dump&#xff0c;windbg会自动定位到崩溃的上下文&#xff0c;这一点我比较喜欢&#xff0c;有的时候也省去了用 !analyze -v 无趣的等待&#xff0c;参考输出如下&#xff1a;This dump file has an exception of interest stored in it. The …

游戏打不开、程序闪退怎么办?有效的DLL修复工具推荐,一键拯救你的电脑

“由于找不到MSVCP140.dll&#xff0c;无法继续执行代码。”“应用程序无法正常启动(0xc000007b)。”相信许多电脑用户都遇到过类似的弹窗警告&#xff0c;尤其是在运行新安装的游戏或专业软件时。这些令人头疼的问题&#xff0c;十有八九都指向同一个“元凶”——C运行库的缺失…

风光柴储多目标联合调度问题探索

风光柴储多目标联合调度问题 联合调度分析各部分消纳比例&#xff0c;目标各部分成本最小和排放最小。 约束各部荷电状态&#xff0c;功率平衡等等在当今能源转型的大背景下&#xff0c;风光柴储多目标联合调度成为了热门话题。这种联合调度旨在实现能源的高效利用&#xff0c;…

实体门店新纪元:从“单点AI尝试”到“系统智能体”的转型之路

近两年来&#xff0c;实体经营领域普遍感受到一种“矛盾现象”&#xff1a;技术在不断升级&#xff0c;设备在持续更新&#xff0c;AI话题也频繁出现在各类讨论中&#xff0c;然而&#xff0c;许多门店的经营压力并未因此减轻&#xff0c;反而呈现出更加复杂的挑战。客流获取成…

Oracle 高风险锁等待快速诊断手册

一、手册使用说明1.1 适用场景生产库出现会话阻塞、业务卡顿、事务超时监控工具&#xff08;如OEM、Zabbix&#xff09;告警“锁等待次数突增”“Concurrency等待占比超20%”出现高风险锁事件&#xff08;如enq: CI - contention、enq: TX - allocate ITL entry&#xff09;1.2…

从“经验驱动”到“系统智能”:实体门店经营的结构性升级

当前实体经营领域&#xff0c;普遍存在一个深层挑战&#xff1a;许多门店尽管在工具、设备乃至营销手段上不断更新&#xff0c;但其核心经营逻辑仍停留在较为传统的模式。获客依赖广告与促销&#xff0c;服务依靠人员经验与话术&#xff0c;客户离店后关系难以持续&#xff0c;…

UVM-phase中的object机制

在class uvm_phase extends uvm_object中1. 类的作用和结构这个类是 uvm_phase&#xff0c;它管理测试平台中阶段的 objection 机制。UVM 使用 objection 机制来控制仿真的执行时间&#xff0c;防止测试提前结束。核心成员&#xff1a;systemveriloguvm_objection phase_done; …

AI+IoT双轮驱动:构建风电设备预测性维护数字孪生体的全栈技术实践

凌晨三点&#xff0c;内蒙古某大型风电场运维主管王工接到SCADA系统告警&#xff1a;“#23风机异常停机”。他迅速调取振动频谱图&#xff0c;却发现数据杂乱无章——是主轴承即将失效&#xff1f;还是传感器松动导致误报&#xff1f;抑或只是电网波动引发的瞬时保护动作&#…

UE5 C++(7):

&#xff08;31&#xff09; &#xff08;32&#xff09; 谢谢

企业落地 ChatBI,如何构建可信可靠的数据底座?

在企业 ChatBI 落地过程中&#xff0c;数据底座的技术路线选择直接决定了数据可信度、维护成本和业务响应速度。传统宽表架构在数据口径一致性、维护成本和灵活性上已难以支撑企业级 ChatBI 的规模化应用&#xff0c;而基于 NoETL 明细语义层的方案正成为新一代数据底座的主流选…

亲测好用8个AI论文写作软件,本科生搞定论文不求人!

亲测好用8个AI论文写作软件&#xff0c;本科生搞定论文不求人&#xff01; AI 工具如何让论文写作变得轻松高效 在当今这个信息爆炸的时代&#xff0c;本科生的论文写作任务日益繁重&#xff0c;尤其是在面对大量文献阅读、数据分析和文字表达时&#xff0c;许多同学都会感到力…

UE5 C++(6-2):描述角色 EndPlay 原因的枚举类 EEndPlayReason::Type,此命名空间里定义了一个枚举类。

&#xff08;30&#xff09;描述角色 EndPlay 原因的枚举类 EEndPlayReason::Type &#xff1a;&#xff08;31&#xff09; 谢谢

基于IEEE33节点配电网的分布式电源与电动汽车接入潮流计算研究:考虑风光时序特性与电动汽车出...

含分布式电源和电动汽车的配电网潮流计算 考虑风光以及电动汽车的出力时序特性 建立风光电动汽车接入的潮流模型 基于IEEE33节点配电网&#xff0c;采用牛拉法求解得到接入之后的潮流分布。引言 随着可再生能源与新型用电负荷的快速发展&#xff0c;现代配电网正经历从“被动”…

双馈风力发电机直接功率控制的Simulink Matlab模型探索

双馈风力发电机直接功率控制simulink Matlab模型 采用直接功率控制的矢量控制策略在风力发电领域&#xff0c;双馈风力发电机&#xff08;DFIG&#xff09;因其独特的优势被广泛应用。而直接功率控制&#xff08;DPC&#xff09;作为一种高效的控制策略&#xff0c;为DFIG的稳定…

【珍藏干货】零成本打造智能文档问答系统!Everything plus RAG实战:让AI帮你从海量文档中精准找答案

本文介绍了一个基于RAG技术的开源智能文档问答系统"Everything plus"&#xff0c;结合BM25关键词检索与向量检索技术&#xff0c;实现从海量文档中精准查找答案。系统采用三层架构&#xff0c;支持30种文件类型扫描&#xff0c;包含混合检索、RRF融合算法、查询重写和…

基于springboot的美食分享平台网站设计实现

技术背景SpringBoot作为Java生态中广泛使用的框架&#xff0c;简化了传统Spring应用的配置和部署流程。其自动配置、内嵌服务器和依赖管理特性&#xff0c;使得开发者能快速构建高可用的Web应用。在美食分享平台场景中&#xff0c;SpringBoot的高效开发模式适合处理用户生成内容…

脉脉独家【AI创作者xAMA】| 多维价值与深远影响

&#x1f525;草莓熊Lotso&#xff1a;个人主页 ❄️个人专栏: 《C知识分享》 《Linux 入门到实践&#xff1a;零基础也能懂》 ✨生活是默默的坚持&#xff0c;毅力是永久的享受&#xff01; &#x1f3ac; 博主简介&#xff1a; 文章目录 前言&#xff1a;一、对AI创作者的个…

CSDN技术变现指南:从0到1开启知识创富之路

一、开篇&#xff1a;CSDN&#xff0c;技术人的变现宝藏在当今数字化浪潮中&#xff0c;技术更迭日新月异&#xff0c;CSDN 作为中国最大的技术社区之一&#xff0c;自 1999 年成立以来&#xff0c;一直是技术人交流、学习与成长的核心阵地。它见证并推动了中国 IT 行业的蓬勃发…

AI 写论文哪个软件最好?虎贲等考 AI 凭 “学术闭环” 登顶首选

毕业季的论文攻坚战&#xff0c;“AI 写论文哪个软件最好” 成了学子圈的终极拷问。有的软件文献引用虚拟无据&#xff0c;有的 AI 痕迹明显被导师打回&#xff0c;有的功能碎片化需反复切换工具 —— 真正靠谱的 AI 写作软件&#xff0c;不仅要 “写得快”&#xff0c;更要 “…

初学者通关指南:聚焦信息安全中的网络安全,一文厘清关键技术与概念

一、网络安全基础 OSI参考模型与TCP/IP开放模型对比 应用层 应用层 TehnetHTTPSMTPFTP DNSTFTPSSH 表示层 会话层 传输层 传输层 TCPUDP网络层 网络层 IP协议簇&#xff08;RIP、OSPF、SNMP、ICMP&#xff09; 数据链路层 物理和数据链路层 以太网 令牌…