news 2026/5/30 15:16:53

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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)

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


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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/30 0:19:30

数据库笔记

SQL数据库所有数据有相同的字段名&#xff08;键&#xff09;&#xff0c;可以像表格那样存。字段名作为每一列的头。但是很明显不适合存字段为数组、列表、字典的数据。NoSQL数据库不像表格那样存的数据库。每个数据条目的成员不固定。事务把一系列操作按顺序写成一个脚本&…

作者头像 李华
网站建设 2026/5/20 18:15:56

UVM-phase中的object机制

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

作者头像 李华
网站建设 2026/5/20 14:56:31

FeignRequestInterceptor 原理详解

FeignRequestInterceptor是 OpenFeign 的请求拦截器机制&#xff0c;其工作原理如下&#xff1a;1. 核心设计模式责任链模式&#xff1a;Feign 通过拦截器链在请求发送前和接收后执行自定义逻辑。// 拦截器接口定义 public interface RequestInterceptor {void apply(RequestTe…

作者头像 李华
网站建设 2026/5/24 12:00:59

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

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

作者头像 李华
网站建设 2026/5/20 20:54:25

网络安全技术核心框架:一文理清从原理到实践的知识体系

1.网络安全的概念 网络安全的定义 ISO对网络安全的定义&#xff1a;网络系统的软件、硬件以及系统中存储和传输的数据受到保护&#xff0c;不因偶然的或者恶意的原因而遭到破坏、更改、泄露&#xff0c;网络系统连续可靠正常地运行&#xff0c;网络服务不中断。 网络安全的属…

作者头像 李华
网站建设 2026/5/30 14:00:01

Aurix TC387 Can配置记录

一、MCMCAN介绍fSYN is supplied from fMCANH and fASYN is supplied from fMCAN from CCU. fSYN is used as the clock source for Register and RAM interface,fASYN is used to generate the nominal and fast CAN FD baudrates. It is recommended to use fASYN as 80, 40,…

作者头像 李华