Menu
Consider the following:
<div onclick="alert('you clicked the header')" class="header"> <span onclick="alert('you clicked inside the header');">something inside the header</span> </div> How can I make it so that when the user clicks the span, it does not fire the div's click event?
701
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!
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.
14, returning false from an event handler will no longer stop event propagation. Instead, e. stopPropagation() or e. preventDefault() should be triggered manually, as appropriate.
Try with (click)="$event. stopPropagation()" . It might help as it worked for me in my scenario.
Use event.stopPropagation().
<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span> For IE: window.event.cancelBubble = true
<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span> 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
