Search code examples
javascripthtmlreactjsevent-bubbling

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

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.

Solution

  • 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.