How to prevent click event propagation

Question

When using a material button inside a container and you click on the material button, it triggers the material button event handler, but then it propagates up to the container. What is the recommended way to stop the event from propagating beyond the material button?

score 0 · Accepted Answer · answered May 27 '20 at 08:09

0

event.stopPropagation() will stop it propagating.

event.preventDefault() stops any native action the event would have.

https://api.dart.dev/stable/2.8.3/dart-html/Event-class.html

answered May 27 '20 at 08:09

Ted Sander

1,899
8
11

Thanks Ted. While this is the way to stop propagating events, it is not easy to apply, especially with composite material components. It would be better if there was a "preventPropagation" property in the component itself. – Krinkster May 29 '20 at 12:39
Sorry I'm going to disagree. We have a lot of code using this and this has never come up as a need, or finding and it just pollutes the API. – Ted Sander Jun 01 '20 at 18:03
K. So what is the recommended way to prevent a Material Menu item from bubbling up a click event? – Krinkster Jun 02 '20 at 22:30
@TedtSander Would love to know how you can prevent a Material Menu item from bubbling up the event from the Material Menu item button. – Krinkster Jun 11 '20 at 19:45

How to prevent click event propagation

1 Answers1