Menu
I have a case of event bubbling. Example :
<td (click)="doSomething()">
<text [innerHtml]="content">
// content of innerHtml is : <a href="http://google.com"></a>
</text>
</td>
The tag is rendered from another component through innerHtml. The problem: when i click on the link, the click event of element is fired also. How to solve the problem (stop the propagation of doSomething()), knowing that event handlers(or any angular 2 code ) can't be passed through innerHtml?
Thank you!
795
To stop the click event from propagating to the <div> element, you have to call the stopPropagation() method in the event handler of the button: btn. addEventListener('click', (e) => { e. stopPropagation(); alert('The button was clicked!
stopPropagation() The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
The stopPropagation() method prevents propagation of the same event from being called. Propagation means bubbling up to parent elements or capturing down to child elements.
Workaround could be simply placing (click)="$event.stopPropagation()" over text component, so that event will not get bubbled up from hosting component. Same thing can be improvise by writing a Directive.
<td (click)="doSomething()">
<text (click)="$event.stopPropagation()" [innerHtml]="content">
// content of innerHtml is : <a href="http://google.com"></a>
</text>
</td>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
