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

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.jsqmd.com/news/206144/

相关文章:

  • 风光柴储多目标联合调度问题探索
  • 实体门店新纪元:从“单点AI尝试”到“系统智能体”的转型之路
  • Oracle 高风险锁等待快速诊断手册
  • 从“经验驱动”到“系统智能”:实体门店经营的结构性升级
  • 数据库笔记
  • AI+IoT双轮驱动:构建风电设备预测性维护数字孪生体的全栈技术实践
  • UE5 C++(7):
  • 亲测好用8个AI论文写作软件,本科生搞定论文不求人!
  • 企业落地 ChatBI,如何构建可信可靠的数据底座?
  • UE5 C++(6-2):描述角色 EndPlay 原因的枚举类 EEndPlayReason::Type,此命名空间里定义了一个枚举类。
  • 基于IEEE33节点配电网的分布式电源与电动汽车接入潮流计算研究:考虑风光时序特性与电动汽车出...
  • 【珍藏干货】零成本打造智能文档问答系统!Everything plus RAG实战:让AI帮你从海量文档中精准找答案
  • 基于springboot的美食分享平台网站设计实现
  • 脉脉独家【AI创作者xAMA】| 多维价值与深远影响
  • 网络安全核心技术要点速查手册:面试与工作实战必备总结
  • AI 写论文哪个软件最好?虎贲等考 AI 凭 “学术闭环” 登顶首选
  • CSDN技术变现指南:从0到1开启知识创富之路
  • 初学者通关指南:聚焦信息安全中的网络安全,一文厘清关键技术与概念
  • 虎贲等考 AI:重新定义学术写作,全流程智能赋能科研新生态
  • 网络安全其实很简单!零基础就能读懂的五大关键技术,颠覆你的认知
  • BMI270,高性能高性价比的运动传感器, 现货库存
  • 前端调用a服务,a服务将请求用controller+openfeign调用b服务,接口参数中有header参数和body,a服务应该怎么设置,才简单
  • adb wifi连接!
  • HttpServletRequest request获取整个headers有什么方法
  • 硬核盘点:网络安全关键技术栈的高能总结与演进分析
  • 微信小程序开发入门
  • 网络安全技术核心框架:一文理清从原理到实践的知识体系
  • 学网络安全,一张清单就够了!五大核心技术通俗解析与入门路径
  • FeignRequestInterceptor 原理详解
  • 网络安全保姆级入门:手把手详解五大核心技术,小白也能快速上手