Ferma la propagazione degli eventi del mouse

Qual è il modo più semplice per interrompere la propagazione degli eventi del mouse in Angular 2? Devo passare un $eventoggetto speciale e chiamare stopPropagation()me stesso o c'è un altro modo. Ad esempio in Meteor posso semplicemente tornare falsedal gestore dell'evento.

Se vuoi essere in grado di aggiungere questo a qualsiasi elemento senza dover copiare / incollare lo stesso codice più e più volte, puoi fare una direttiva per farlo. È semplice come di seguito:

import {Directive, HostListener} from "@angular/core";

@Directive({
    selector: "[click-stop-propagation]"
})
export class ClickStopPropagation
{
    @HostListener("click", ["$event"])
    public onClick(event: any): void
    {
        event.stopPropagation();
    }
}

Quindi aggiungilo all'elemento su cui lo desideri:

<div click-stop-propagation>Stop Propagation</div>

Il più semplice è chiamare la propagazione di stop su un gestore di eventi. $eventfunziona allo stesso modo in Angular 2 e contiene l'evento in corso (tramite esso un clic del mouse, un evento del mouse, ecc.):

(click)="onEvent($event)"

sul gestore eventi, possiamo lì interrompere la propagazione:

onEvent(event) {
   event.stopPropagation();
}

La chiamata stopPropagationall'evento impedisce la propagazione: 

(event)="doSomething($event); $event.stopPropagation()"

Per preventDefaultappena ritornofalse

(event)="doSomething($event); false"

Aggiunta alla risposta da @AndroidUniversity. In una sola riga puoi scriverlo in questo modo:

<component (click)="$event.stopPropagation()"></component>

Se si utilizza un metodo associato a un evento, è sufficiente restituire false:

@Component({
  (...)
  template: `
    <a href="https://stackoverflow.com/test.html" (click)="doSomething()">Test</a>
  `
})
export class MyComp {
  doSomething() {
    (...)
    return false;
  }
}

Questo ha funzionato per me:

mycomponent.component.ts:

action(event): void {
  event.stopPropagation();
}

mycomponent.component.html:

<button mat-icon-button (click)="action($event);false">Click me !<button/>

Ho dovuto stopPropigatione preventDefaultper evitare che un bottone espandesse un oggetto a fisarmonica che si trovava sopra.

Così...

@Component({
  template: `
    <button (click)="doSomething($event); false">Test</button>
  `
})
export class MyComponent {
  doSomething(e) {
    e.stopPropagation();
    // do other stuff...
  }
}

Niente ha funzionato per IE (Internet Explorer). I miei tester sono stati in grado di rompere il mio modale facendo clic sulla finestra popup sui pulsanti dietro di essa. Quindi, ho ascoltato un clic sul mio div dello schermo modale e ho forzato la messa a fuoco su un pulsante popup.

<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)
} 

ero solito

<... (click)="..;..; ..someOtherFunctions(mybesomevalue); $event.stopPropagation();" ...>...

in breve, basta separare altre cose / chiamate di funzione con ';' e aggiungi $ event.stopPropagation ()

Ho appena registrato in un'applicazione Angular 6, event.stopPropagation () funziona su un gestore di eventi senza nemmeno passare $ event

(click)="doSomething()"  // does not require to pass $event


doSomething(){
   // write any code here

   event.stopPropagation();
}

Disabilita il collegamento href con JavaScript

<a href="#" onclick="return yes_js_login();">link</a>

yes_js_login = function() {
     // Your code here
     return false;
}

Come dovrebbe funzionare anche in TypeScript con Angular (My Version: 4.1.2)

<a class="list-group-item list-group-item-action" (click)="employeesService.selectEmployeeFromList($event); false" [routerLinkActive]="['active']" [routerLink]="['/employees', 1]">
    RouterLink
</a>

public selectEmployeeFromList(e) {

    e.stopPropagation();
    e.preventDefault();

    console.log("This onClick method should prevent routerLink from executing.");

    return false;
}

Ma non disabilita l'esecuzione di routerLink!

L'aggiunta di false after function interromperà la propagazione degli eventi

<a (click)="foo(); false">click with stop propagation</a>

Ciò ha risolto il mio problema, da prevenzione che un evento viene generato da un bambino:

doSmth(){
  // what ever
}

        <div (click)="doSmth()">
            <div (click)="$event.stopPropagation()">
                <my-component></my-component>
            </div>
        </div>

Prova questa direttiva

@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);
        }
    }
}

uso

<input 
    type="text" 
    stopPropagation="input" />

<input 
    type="text" 
    [stopPropagation]="['input', 'click']" />