Я создал веб-приложение 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
как логическое значение.