Prevent multiple click event when clicking child element

Question

I have a list of elements.

Each element have a global click event and a child icon which should also be clickable.

Example :

<div class="parent-element" (click)="clickParent()">
   <span class="button" (click)="childClick()">
   </span>
</div>

For now when I click on the span, both click are fired. How can I separate it from the parent click event ?

Answer 1

Catch the event on both methods (parent and child) and call event.preventDefault() or event.stopPropagation()