Currently, I am working on a web development project using Angular/Typescript.
I am searching for an efficient method to apply the (click) event only to a specific division and not to some selected elements within it.
For instance, let's take this division:
<div class='card' (click)="card_click()">
<button (click)="whatever($event)">Save</button>
</div>
Clicking the button will trigger both functions.
Typically, one would catch the event in the function and use event.stopPropagation() to stop the propagation.
However, in certain scenarios like a drop-down (as shown in the image below) this approach can get complicated.
https://i.sstatic.net/yYFz9.jpg
In such cases, I utilize the card's event to verify the mouse click target and achieve the desired outcome.
Though not the most efficient solution, it gets the job done.
HTML :
<div class='card' (click)="card_click($event)">
<button (click)="whatever($event)">Save</button>
</div>
Typescript :
card_click(event) {
//dropdown button catches SPAN or A
if(event.target.tagName == "SPAN" || event.target.tagName == "A") {
event.stopPropagation()
}
//proceed with the rest
}
This solution may not be ideal as adding a new element to the card would require editing this function each time.
Are there any other elegant solutions to tackle this issue?
Thank you