Как убрать вызов 2 обработчиков при клике на дочерний элемент?

Question

[wiincked]

Добрый день!
У меня есть обработчик при клике на родительский блок, который вывод сообщение в консоль.
Внутри родительского блока есть кнопка при клике на нее должно происходить другой обработчик, но вызывается все два обработчика.
Подскажите, пожалуйста, как можно сделать, чтобы при клике на кнопку вызывался только один обработчик.

Ссылка на пример https://codesandbox.io/s/priceless-moon-hb7h1

Answer 1

[0xD34F]

Погуглите, что такое всплытие событий, и как его останавливать.

А можете и не гуглить.

const onClickRow = () => {
  console.log('Строка');
};

const onClickButton = e => {
  e.stopPropagation();
  console.log('Кнопка');
};

<div onClick={onClickRow}>
  <button onClick={onClickButton}>click me</button>
</div>

Или оставьте один обработчик, на родительском элементе, внутри которого в зависимости от target события выполняйте различные действия.

Всё ещё ленитесь гуглить? - ну тогда жмите сюда.

const onClickRow = e => {
  if (e.target.tagName === 'BUTTON') {
    console.log('Кнопка');
  } else {
    console.log('Строка');
  }
};

<div onClick={onClickRow}>
  <button>click me</button>
</div>

Comments

[wiincked]

Спасибо за подсказку со всплытием событий. Нагуглил как раз про event.stopPropagation(); которые нужен был.