Child element click triggering parent element as well - Reactjs

Question

The code is as follows

<ul className="sb-modules-list">
    <li key={index} className={this.getModuleClass(module)} onClick={() => { alert(127) }}>
        <ul className="sb-module-steps-list">
           { module.steps && module.steps.map((stepInfo, stepIndex) =>
               <li key={stepIndex} className={this.getStepClass(stepInfo)}  onClick={() => { alert(456) }}>
                        <p>{stepInfo.short_title}</p>
                      </li>
                      )}
         </ul>
</ul>

The problem is that when i click on the innermost child li tag, it triggers onclick event on child as well as the parent.

For example, in this case the click triggers alert(456) and also the parent function alert(123);

I don't want the parent method to run when the child is clicked. Any idea on how to fix this?

trixn · Accepted Answer · 2018-05-08 11:20:53Z

1

You can use event.stopPropagation() to prevent events from bubbling up. Consider this example of a click handler:

const handleClick = (event, value) => {
    event.stopPropagation();
    alert(value);
}

Then you can use it like this:

<li onClick={event => handleClick(event, 127)}></li>

answered May 8, 2018 at 11:20

trixn

16.4k2 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phiter · Accepted Answer · 2018-05-08 11:11:28Z

0

You have to put the event object in your parent's parameter list and use it to prevent what's going to happen:

You can do this:

onClick={(e) => { e.target === e.currentTarget && alert(127) }

You can (and probably should) use an if, which is a little more verbose but easier to understand:

onClick={(e) => { if (e.target !== e.currentTarget) return; alert(127) }

answered May 8, 2018 at 11:11

Phiter

15k14 gold badges52 silver badges87 bronze badges

Collectives™ on Stack Overflow

Child element click triggering parent element as well - Reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related