Stop mouse event propagation
If you want to be able to add this to any elements without having to copy/paste the same code over and over again, you can make a directive to do this. It is as simple as below:
import {Directive, HostListener} from "@angular/core"; @Directive({ selector: "[click-stop-propagation]"})export class ClickStopPropagation{ @HostListener("click", ["$event"]) public onClick(event: any): void { event.stopPropagation(); }}
Then just add it to the element you want it on:
<div click-stop-propagation>Stop Propagation</div>
The simplest is to call stop propagation on an event handler. $event
works the same in Angular 2, and contains the ongoing event (by it a mouse click, mouse event, etc.):
(click)="onEvent($event)"
on the event handler, we can there stop the propagation:
onEvent(event) { event.stopPropagation();}
Calling stopPropagation
on the event prevents propagation:
(event)="doSomething($event); $event.stopPropagation()"
For preventDefault
just return false
(event)="doSomething($event); false"
Event binding allows to execute multiple statements and expressions to be executed sequentially (separated by ;
like in *.ts
files.
The result of last expression will cause preventDefault
to be called if falsy. So be cautious what the expression returns (even when there is only one)