JZTXT

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

发布时间 2023-06-28 14:18:54作者: 马铃薯头抽雪茄

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删除监听