Using onClick appropriately

Question

What is the proper way to handle an onClick event?

<div class='container' onClick={() => { *do something* }}>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
</div>

This will cause onClick to also trigger if you click on one of the child elements. How can I restrict the event to only fire on the container?

A better javascript solution can be found here. https://stackoverflow.com/questions/9183381/how-to-have-click-event-only-fire-on-parent-div-not-children — Kavindra, May 20 '18 at 11:59

score 2 · Accepted Answer · answered May 20 '18 at 11:58

2

Check event.currentTarget.

<div class='container' onClick={(e) => { if(e.currentTarget.class == "container") { do something } }}>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
</div>

answered May 20 '18 at 11:58

Barmar

741,623
53
500
612

score 0 · Answer 2 · answered May 20 '18 at 12:01

limit action to event target. sth like that.

document.querySelector('.container').addEventListener('click', function(e){
  e.target.doSomething;
});

/*
* document.querySelector('.container')
*   .addEventListener('click', (e) => {
*   e.target.doSomething;
*})
*/

Using onClick appropriately

2 Answers2