web-dev-qa-db-fra.com

Arrêter la propagation d'un événement de souris

Quel est le moyen le plus simple d’arrêter la propagation des événements de souris dans Angular 2? Devrais-je passer un objet $event spécial et appeler stopPropagation() moi-même ou autrement? Par exemple, dans Meteor, je peux simplement renvoyer false à partir du gestionnaire d’événements.

angulardom-eventsevent-propagation
194
Rem

Si vous voulez pouvoir ajouter ceci à n'importe quel élément sans avoir à copier/coller le même code encore et encore, vous pouvez créer une directive pour le 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>
183
dnc253

Le plus simple consiste à appeler la propagation d'arrêt sur un gestionnaire d'événements. $event fonctionne de la même façon dans Angular 2 et contient l'événement en cours (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();
}
212
Angular University

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

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

Pour preventDefault, il suffit de renvoyer false

(event)="doSomething($event); false"
115
Günter Zöchbauer

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

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

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

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

Je devais stopPropigation et preventDefault afin d'empêcher un bouton de développer un élément d'accordéon qu'il était assis au-dessus.

Alors...

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

Rien n'a fonctionné pour IE (Internet Explorer). Mes testeurs ont réussi à casser mon modal en cliquant dans la fenêtre contextuelle sur les boutons situés derrière. Donc, j'ai écouté pour un clic sur mon div écran modal et forcé refocus sur un bouton contextuel.

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

Je viens juste d’archiver une application Angular 6, 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();
}
2
Dipendu Paul

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-il aussi 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!

1
Javan R.

cela a fonctionné pour moi: mycomponent.component.ts:

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

mycomponent.component.ts:

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

L'ajout de false après la fonction arrêtera la propagation de l'événement

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

Essayez cette directive

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

Usage

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

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

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

doSmth(){
  // what ever
}
        <div (click)="doSmth()">
            <div (click)="$event.stopPropagation()">
                <my-component></my-component>
            </div>
        </div>
0
JulianRot