首页 > 其他分享 >React - 判断当前点击是组件的外部或内部

React - 判断当前点击是组件的外部或内部

时间:2023-06-28 14:24:08浏览次数:31  
标签:useRef React 点击 组件 Ref 监听

1.先获取当前要监听的那个组件的ref

import React, { useRef } from 'react';
// 类组件获取
this.Ref = React.createRef();
// 函数组件获取
const Ref = useRef();

2.通过addEventListener来全局监听

document.addEventListener("mousedown", (e) => {
  if (Ref.contains(e.target)) {
    console.log("点击组件里面");
  } else {
    console.log("点击组件外面");
  }
});

3.记得到时候使用removeEventListener删除监听

标签:useRef,React,点击,组件,Ref,监听
From: https://www.cnblogs.com/Dluea/p/17511281.html

相关文章

  • Android性能优化:微信自用高性能持久化框架——MMKV组件原理
    MMKVMMKV——基于mmap的高性能通用key-value组件,底层序列化/反序列化使用protobuf实现,性能高,稳定性强。githubMMKV是基于mmap内存映射的移动端通用key-value组件,底层序列化/反序列化使用protobuf实现,性能高,稳定性强。从2015年中至今,在iOS微信上使用已有近3年,其......
  • 精选Android中高级高频面试题:四大组件及Fragment原理
    因为实际开发与参考答案会有所不同,再者怕误导大家,所以这些面试题答案还是自己去理解!面试官会针对简历中提到的知识点由浅入深提问,所以不要背答案,多理解。Activity1、说下Activity生命周期?参考解答:在正常情况下,Activity的常用生命周期就只有如下7个onCreate():表示Activity正在被创......
  • spring基础之常用组件
    spring基础之常用组件一、基于xml注入bean先看看我们在没有使用注解之前,最早使用xml进行bean的注入是怎么操作的呢?首先我们需要在项目中创建一个.xml文件然后使用bean标签注册一些组件。现在我们就以注册person这个bean进行举例。先创建一个需要注册的bean实例@Data@AllArgs......
  • VUE框架组件中通信方式(4)
    ref-children-parentref方法既可以获取真实的DOM节点,还可以获取到子组件的实例VC,$parent可以在子组件中获取父组件的实例VC,使用方式是在子组件的方法中传入的参数只能是$parent如:<button@click="handler($parent)">点击我爸爸给我10000元</button>示例代码如下;//父组件代码<......
  • 前端Vue自定义手机号文本格式化组件手机号码文本转星号
    前端Vue自定义手机号文本格式化组件,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13231效果图如下:cc-format-phone使用方法<!--phone:手机号isStar:是否转星号--><cc-format-phone:phone="":isStar="false"></cc-format-phone>......
  • DevExpress WPF Scheduler组件,快速构建性能优异的调度管理器!(上)
    无论您在WPF项目中是需要Outlook样式的调度程序,还是需要时间表或议程视图来向最终用户展示信息,DevExpressWPF Scheduler都提供了数十个选项,如集成的日程对话框等,因此用户可以快速构建下一个伟大的调度管理器。DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需......
  • vue组件-使用Vue.component全局注册组件
    通过components注册的时私有子组件例如:在组件A的components节点下,注册了组件F。则组件F只能用在组件A中;不能被用在组件C中。注册全局组件在vue项目的main.js入口文件中,通过Vue.component()方法,可以注册全局组件。importVuefrom'vue'importAppfrom'./App.vue'//导......
  • React ISR 如何实现 - 最后的 Demo
    之前写了两个demo讲解了如何实现SSR和SSG,今天再写个demo说在ISR如何实现。什么是ISRISR即IncrementalStaticRegeneration增量静态再生,是指在SSG的前提下,可以在收到请求时判定页面是否需要刷新,如果需要则重新构建该页面,这样既拥有了静态页面的优势又可以避免页......
  • vue-组件-使用组件的三个步骤
    组件之间的父子关系使用组件的三个步骤......
  • vue组件-启用less语法以及唯一根节点
    <template><div><divclass="test-box"><h3>这是用户自定义的Test.vue---{{username}}</h3><button@click="changeName">修改用户名</button></div>&l......