Использование onClick соответственно

Question

Как правильно обрабатывать событие onClick?

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

Это также приведет к срабатыванию onClick при нажатии на один из дочерних элементов.Как я могу ограничить событие только стрельбой по контейнеру?

Answer 1

ограничить действие до цели события.что-то вроде этого.

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

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

Answer 2

Чек 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>