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.
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.
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>
);