Detener la propagación de eventos del mouse en Angular

¿Cuál es la forma más fácil de detener la propagación de eventos del mouse en Angular 2? Debería pasar yo mismo el objeto $event y llamar a stopPropagation() yo mismo o hay alguna otra manera. Por ejemplo, en Meteor, simplemente puedo devolver false desde el 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 hacer esto. 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(); } } 

    A continuación, solo agréguelo al elemento que desea:

     
    Stop Propagation

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

     (click)="onEvent($event)" 

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

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

    Llamar a stopPropagation en el evento impide la propagación:

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

    Para preventDefault solo devuelve false

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

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

      

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

     @Component({ (...) template: ` Test ` }) export class MyComp { doSomething() { (...) return false; } } 

    Tuve que stopPropigation y stopPropigation de manera stopPropigation para evitar que un botón expandiera un elemento de acordeón que se encontraba arriba.

    Asi que…

     @Component({ template: `  ` }) export class MyComponent { doSomething(e) { e.stopPropagation(); // do other stuff... } } 

    Deshabilitar el enlace href con JavaScript

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

    Modelo

      RouterLink  

    Mecanografiado

     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!

    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 modal de pantalla y forcé el enfoque en un botón emergente.

      modalOutsideClick(event: any) { event.preventDefault() // handle IE click-through modal bug event.stopPropagation() setTimeout(() => { this.renderer.invokeElementMethod(this.myModal.nativeElement, 'focus') }, 100) } 

    La mejor solución es devolver falso.

     myClickEventHandler(): boolean { ...your code; return false;}