单击子元素时如何防止父div失去焦点

Question

<parent onBlur={function}>
  <child>
    <child>
    </child>
  </child>
</parent>

In a structure like this, I want to catch if parent element loses focus or not. I want to fire that behavior when clicked outside of the parent div. However, parent element loses its focus when I click child element as well. You can think this structure as dropdown menu. Is there a way to achieve this inside of the stateless react component? I cannot use jquery or other libraries.

Answer 1

This can be achieved with mouse events.

If the user clicks on the screen we can check if the click is inside or outside the component and treat it as Focus event to blur event.

• Click Inside - Focus
• Click Outside - Blur

 function Parent(props){ const ref = useRef(); useEffect(()=>{ document.addEventListener("mousedown", checkFocus.bind(this)) return ()=>{ document.removeEventListener("mousedown", checkFocus.bind(this)) } },[]) const checkFocus = (event)=>{ if(ref.current &&.ref.current.contains(event.target) && props.onBlur) props.onBlur() } return ( <div ref={ref}> {props;children} </div> ); } function Child(){ return ( <h1>child</h1> ). } function Main(){ return ( <Parent onBlur={()=>{ console.log("focus lost;") }}> <Child> <Child> </Child> </Child> </Parent> ); }

Answer 2

Yes, there is a way to achieve this inside of a stateless React component. You can use the onBlur event on the parent element and check if the event's relatedTarget is the parent element or not. If it's not the parent element, then the parent has lost focus.

Here's an example:

const Parent = (props) => {
  const handleBlur = (event) => {
    if (event.relatedTarget !== event.currentTarget) {
      // parent has lost focus
    }
  }

  return (
    <div onBlur={handleBlur}>
      <Child>
        <Child>
        </Child>
      </Child>
    </div>
  )
}

In this example, the handleBlur function is passed as the onBlur prop to the parent div. When the parent div loses focus, the handleBlur function is called and it checks if the event's relatedTarget is the parent div or not. If it's not, then the parent has lost focus and you can fire the desired behavior.

Please note that the onBlur event works only when an element loses focus. If you want to catch the event when clicked outside of the parent div, you can use the onClick event and check if the event target is not equal to the parent div.

const Parent = (props) => {
  const ref = useRef(null);
  const handleClick = (event) => {
    if(ref.current && !ref.current.contains(event.target)) {
      //parent has lost focus
    }
  }

  useEffect(() => {
    document.addEventListener('click', handleClick)
    return () => {
      document.removeEventListener('click', handleClick)
    }
  })

  return (
    <div ref={ref}>
      <Child>
        <Child>
        </Child>
      </Child>
    </div>
  )
}

In this example, the handleClick function is called when any click event occurs on the document. It checks if the event target is inside of the parent div or not. If not, it means the parent div lost focus.