Я создал веб-приложение React JS под названием Vacay Away, которое помогает организовать график отпуска. Об этом подробнее здесь"!

Проблема, с которой я столкнулся при настройке обработчиков событий компонента «Отпуск», заключалась в том, что когда я нажимал триггер дочернего события, одновременно запускалось событие родительского компонента. В частности, когда я щелкал значок удаления в компоненте отпуска, он не только удалял отпуск, но также запускал событие на карточке и перенаправлял на страницу показа отпуска (которой больше не существовало, потому что я удалил отпуск) .

Затем я узнал об использовании метода stopPropagation() интерфейса Event для предотвращения дальнейшего распространения или всплытия к родительским элементам.

В моем коде моим родительским элементом является <CardActionArea>, а моим дочерним элементом является <IconButton>. Когда onClick запускается в моем дочернем элементе, я хочу остановить распространение события onClick моего родительского элемента.

<CardActionArea onClick={showPageRoute} >
  <Card container className={classes.card} elevation={5}>
    <CardHeader
      action={
        <IconButton onClick={(e) => handleDelete(vacation.id, e)}>
          <DeleteOutlined color="primary" />
        </IconButton>
      }
    />
    /** Code for Card Content **/   
    
  </Card>
</CardActionArea>

Моя handleDelete — это функция, переданная в качестве реквизита из моего родительского компонента, списка отпусков. Поэтому я позаботился о том, чтобы остановить любое распространение, когда я запускаю событие, например так:

handleDelete = (vacationId, e) => {
  if(e && e.stopPropagation) e.stopPropagation(); 
/** code to delete the vacation **/
}

Если событие существует и stopPropagation поддерживается в браузере, любое всплывающее окно событий будет отменено. Нет переадресации на несуществующую страницу!

Заключительные замечания

Я подумал, что этот собственный метод Javascript очень удобен, и решил поделиться им.

Я также узнал, что существует эквивалент под названием cancelBubble, метод Microsoft, в отличие от stopPropagation, являющегося методом W3C. Вместо вызова e.stopPropagation() в приведенном выше примере вы можете установить e.cancelBubble = true как логическое значение.