What is the easiest way to stop mouse events propagation in Angular ?
Should I pass special $event
object and call stopPropagation()
myself or there is some other way.
For example in Meteor, I can simply return false
from event handler.
This question is related to
angular
dom-events
event-propagation
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();
}
This solved my problem, from preventign that an event gets fired by a children:
doSmth(){_x000D_
// what ever_x000D_
}
_x000D_
<div (click)="doSmth()">_x000D_
<div (click)="$event.stopPropagation()">_x000D_
<my-component></my-component>_x000D_
</div>_x000D_
</div>
_x000D_
Nothing worked for IE (Internet Explorer). My testers were able to break my modal by clicking off the popup window on buttons behind it. So, I listened for a click on my modal screen div and forced refocus on a popup button.
<div class="modal-backscreen" (click)="modalOutsideClick($event)">
</div>
modalOutsideClick(event: any) {
event.preventDefault()
// handle IE click-through modal bug
event.stopPropagation()
setTimeout(() => {
this.renderer.invokeElementMethod(this.myModal.nativeElement, 'focus')
}, 100)
}
I had to stopPropigation
and preventDefault
in order to prevent a button expanding an accordion item that it sat above.
So...
@Component({
template: `
<button (click)="doSomething($event); false">Test</button>
`
})
export class MyComponent {
doSomething(e) {
e.stopPropagation();
// do other stuff...
}
}
Adding to the answer from @AndroidUniversity. In a single line you can write it like so:
<component (click)="$event.stopPropagation()"></component>
If you're in a method bound to an event, simply return false:
@Component({
(...)
template: `
<a href="/test.html" (click)="doSomething()">Test</a>
`
})
export class MyComp {
doSomething() {
(...)
return false;
}
}
<a href="#" onclick="return yes_js_login();">link</a>
yes_js_login = function() {
// Your code here
return false;
}
<a class="list-group-item list-group-item-action" (click)="employeesService.selectEmployeeFromList($event); false" [routerLinkActive]="['active']" [routerLink]="['/employees', 1]">
RouterLink
</a>
TypeScript
public selectEmployeeFromList(e) {
e.stopPropagation();
e.preventDefault();
console.log("This onClick method should prevent routerLink from executing.");
return false;
}
But it does not disable the executing of routerLink!
This worked for me:
mycomponent.component.ts:
action(event): void {
event.stopPropagation();
}
mycomponent.component.html:
<button mat-icon-button (click)="action($event);false">Click me !<button/>
Try this directive
@Directive({
selector: '[stopPropagation]'
})
export class StopPropagationDirective implements OnInit, OnDestroy {
@Input()
private stopPropagation: string | string[];
get element(): HTMLElement {
return this.elementRef.nativeElement;
}
get events(): string[] {
if (typeof this.stopPropagation === 'string') {
return [this.stopPropagation];
}
return this.stopPropagation;
}
constructor(
private elementRef: ElementRef
) { }
onEvent = (event: Event) => {
event.stopPropagation();
}
ngOnInit() {
for (const event of this.events) {
this.element.addEventListener(event, this.onEvent);
}
}
ngOnDestroy() {
for (const event of this.events) {
this.element.removeEventListener(event, this.onEvent);
}
}
}
Usage
<input
type="text"
stopPropagation="input" />
<input
type="text"
[stopPropagation]="['input', 'click']" />
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)
I just checked in an Angular 6 application, the event.stopPropagation() works on an event handler without even passing $event
(click)="doSomething()" // does not require to pass $event
doSomething(){
// write any code here
event.stopPropagation();
}
Adding false after function will stop event propagation
<a (click)="foo(); false">click with stop propagation</a>
I used
<... (click)="..;..; ..someOtherFunctions(mybesomevalue); $event.stopPropagation();" ...>...
in short just seperate other things/function calls with ';' and add $event.stopPropagation()
Source: Stackoverflow.com