Arrêter la propagation des événements de souris

Quelle est la façon la plus simple d'arrêter la propagation des événements de souris dans Angular 2? Dois-je passer un $eventobjet spécial et m'appeler stopPropagation()ou il existe un autre moyen. Par exemple, dans Meteor, je peux simplement revenir falsedu gestionnaire d'événements.

Si vous voulez pouvoir l'ajouter à n'importe quel élément sans avoir à copier / coller le même code encore et encore, vous pouvez créer une directive pour ce faire. C'est aussi simple que ci-dessous:

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

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

Ensuite, ajoutez-le simplement à l'élément sur lequel vous le souhaitez:

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

Le plus simple est d'appeler stop propagation sur un gestionnaire d'événements. $eventfonctionne de la même manière dans Angular 2, et contient l'événement en cours (par lui un clic de souris, un événement de souris, etc.):

(click)="onEvent($event)"

sur le gestionnaire d'événements, on peut y arrêter la propagation:

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

L'appel stopPropagationà l'événement empêche la propagation: 

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

Pour preventDefaultjuste revenirfalse

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

Ajout à la réponse de @AndroidUniversity. En une seule ligne, vous pouvez l'écrire comme ceci:

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

Si vous êtes dans une méthode liée à un événement, renvoyez simplement false:

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

Cela a fonctionné pour moi:

mycomponent.component.ts:

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

mycomponent.component.html:

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

Je devais stopPropigationet preventDefaultafin d'empêcher un bouton d'étendre un élément d'accordéon qu'il se trouvait au-dessus.

Alors...

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

Rien ne fonctionnait pour IE (Internet Explorer). Mes testeurs ont réussi à casser mon modal en cliquant sur la fenêtre contextuelle sur les boutons situés derrière. J'ai donc écouté un clic sur ma div écran modal et forcé le recentrage sur un bouton 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)
} 

j'ai utilisé

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

en bref, séparez simplement les autres choses / appels de fonction par ';' et ajoutez $ event.stopPropagation ()

Je viens de vérifier dans une application Angular 6, le event.stopPropagation () fonctionne sur un gestionnaire d'événements sans même passer $ event

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


doSomething(){
   // write any code here

   event.stopPropagation();
}

Désactiver le lien href avec JavaScript

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

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

Comment cela devrait également fonctionner dans TypeScript avec Angular (Ma 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;
}

Mais cela ne désactive pas l'exécution de routerLink!

L'ajout de la fonction false after arrêtera la propagation des événements

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

Cela a résolu mon problème, pour éviter qu'un événement ne soit déclenché par un enfant:

doSmth(){
  // what ever
}

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

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