Detener la propagación de eventos del mouse

¿Cuál es la forma más fácil de detener la propagación de eventos del mouse en Angular 2? ¿Debo pasar un $eventobjeto especial y llamarme a stopPropagation()mí mismo o hay alguna otra manera? Por ejemplo, en Meteor, simplemente puedo regresar falsedel controlador de eventos.

Si desea poder agregar esto a cualquier elemento sin tener que copiar / pegar el mismo código una y otra vez, puede hacer una directiva para hacerlo. Es tan simple como a continuación:

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

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

Luego solo agrégalo al elemento en el que lo quieres:

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

Lo más simple es llamar a detener la propagación en un controlador de eventos. $eventfunciona igual en Angular 2, y contiene el evento en curso (mediante un clic del mouse, evento del mouse, etc.):

(click)="onEvent($event)"

en el controlador de eventos, podemos detener la propagación:

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

Llamar stopPropagational evento evita la propagación: 

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

Por preventDefaultsolo regresarfalse

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

Agregando a la respuesta de @AndroidUniversity. En una sola línea puedes escribirlo así:

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

Si está en un método vinculado a un evento, simplemente devuelva falso:

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

Esto funcionó para mí:

mycomponent.component.ts:

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

mycomponent.component.html:

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

Tenía que hacerlo stopPropigationy preventDefaultpara evitar que un botón expandiera un elemento de acordeón sobre el que se encontraba.

Entonces...

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

Nada funcionó para IE (Internet Explorer). Mis probadores pudieron romper mi modal haciendo clic en la ventana emergente en los botones detrás de él. Entonces, escuché un clic en mi div de pantalla modal y forcé a reenfocar un botón emergente.

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

solía

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

en resumen, separe otras cosas / llamadas a funciones con ';' y agregue $ event.stopPropagation ()

Acabo de registrar una aplicación Angular 6, event.stopPropagation () funciona en un controlador de eventos sin siquiera pasar $ event

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


doSomething(){
   // write any code here

   event.stopPropagation();
}

Deshabilitar enlace href con JavaScript

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

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

Cómo debería funcionar también en TypeScript con Angular (Mi versión: 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;
}

¡Pero no deshabilita la ejecución de routerLink!

Agregar falso después de la función detendrá la propagación de eventos

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

Esto resolvió mi problema, evitando que un evento sea disparado por un niño:

doSmth(){
  // what ever
}

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

Prueba esta directiva

@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']" />