navigationend - title angular 6

Detener la propagación de eventos del mouse

Question

¿Cuál es la forma más fácil de detener la propagación de eventos del mouse en Angular 2? ¿Debo pasar el objeto especial $event y llamar a stopPropagation() yo mismo o de alguna otra manera. Por ejemplo, en Meteor, simplemente puedo devolver false desde el controlador de eventos.

Answer 1

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)

Modelo

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

Answer 2

Acabo de registrar una aplicación de 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();
}

Answer 3

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

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

Answer 4

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

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

Answer 5

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>

Answer 6

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

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

Para preventDefault solo devuelve false

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

Answer 7

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, evento del mouse, etc.):

(click)="onEvent($event)"

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

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

Answer 8

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 volver a enfocar 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)
} 

Answer 9

Prueba esta directiva

@Directive({
    selector: ''[stopPropagation]''
})
export class StopPropagatioDirective 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'']" />

Answer 10

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>

Answer 11

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

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

Answer 12

Tuve que stopPropigation y preventDefault para evitar que un botón expandiera un elemento de acordeón que estaba encima.

Asi que...

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

Answer 13

esto funcionó para mí: mycomponent.component.ts:

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

mycomponent.component.ts:

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