How can I trigger a function only when only child divs are clicked using event bubble?-CodePudding

const handleMenu = e => {
    console.log(e.target);
    e.stopPropagation();
}

I want to console the event when a child div is clicked. for example:

    <div onclick={handleMenu}>
        <button>My orders</button>
        <button>Payment</button>
    </div>

So, I want to trigger the handleMenu function only when those buttons are clicked and not to trigger when the area of parent div is getting clicked except those button areas. How can I do it?

and yes I am using reactjs. If any alternative way to do that with reactjs, it will be more helpful.

CodePudding user response：

You can do it in following way. Attach to the event callback on the child like following ..

if(event.currentTarget != event.target ) return;
....

target event = element that triggered event.

currentTarget event = element that has the event listener.

CodePudding user response：

In React, Add a ref to div element, check if the target is equal to ref to see if it's not self event

  const myRef = React.useRef(null);
  const handleMenu = (e) => {
  myRef.current!==e.target
  console.log(myRef.current);
  e.stopPropagation();
  };

 return (
   <div ref={myRef} onClick={handleMenu}>
     <button>My orders</button>
     <button>Payment</button>
   </div>
 );