Блокировка всплывающего клика по вложенному элементу

Условие

Не выводить сообщение "Outer clicked", когда пользователь нажимает на элемент <div> с классом inner.

export const Square = () => {
  const handleOuterClick = () => {
    console.log('Outer clicked');
  };

  return (
    <div className="outer" onClick={handleOuterClick}>
      <div className="inner">Hello</div>
    </div>
  );
};

Ответ

Остановите всплытие события во внутреннем элементе через event.stopPropagation(). preventDefault решает другую задачу и не отключает вызов родительского onClick.

<div className="outer" onClick={handleOuterClick}>
  <div className="inner" onClick={event => event.stopPropagation()}>
    Hello
  </div>
</div>

Клик по inner и его потомкам больше не дойдёт до bubble-обработчика outer. При клике непосредственно по внешнему элементу сообщение сохранится. Если на предке используется onClickCapture, он уже выполнится до обработчика inner: остановка на bubble-фазе не отменяет произошедшее захватывание.