Stoppen Sie die Weitergabe von Mausereignissen

238

Was ist der einfachste Weg, um die Ausbreitung von Mausereignissen in Angular 2 zu stoppen? Sollte ich ein spezielles $eventObjekt passieren und stopPropagation()mich selbst anrufen oder gibt es einen anderen Weg. Zum Beispiel kann ich in Meteor einfach falsevom Ereignishandler zurückkehren.

Rem
quelle

Antworten:

234

Wenn Sie dies zu beliebigen Elementen hinzufügen möchten, ohne denselben Code immer wieder kopieren / einfügen zu müssen, können Sie eine Anweisung dazu erstellen. Es ist so einfach wie unten:

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

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

Fügen Sie es dann einfach zu dem Element hinzu, für das Sie es möchten:

<div click-stop-propagation>Stop Propagation</div>
dnc253
quelle
5
Es funktioniert nicht bei mir. Das Klickereignis wird nicht gestoppt :(
Diallo
9
funktioniert bei mir nicht, wenn ich den anderen Klick habe ... <button click-stop-propagation (click) = "test ($ event)"> test </ button>
Bibby Chung
Hat für mich gearbeitet. Verwenden von Angular 5.2.9
Yarz-Tech
1
Möglicherweise müssen Sie auf ein anderes Mausereignis warten (z. B. Mousedown, Mouseup).
Yohosuff
1
@yohosuff macht einen guten Punkt. Fügen Sie diese Methode der Direktive hinzu: @HostListener("mousedown", ["$event"]) public onMousedown(event: any): void { event.stopPropagation(); }
andreisrob
252

Am einfachsten ist es, die Stop-Propagierung für einen Ereignishandler aufzurufen. $eventfunktioniert in Angular 2 genauso und enthält das laufende Ereignis (durch einen Mausklick, ein Mausereignis usw.):

(click)="onEvent($event)"

Auf dem Event-Handler können wir dort die Weitergabe stoppen:

onEvent(event) {
   event.stopPropagation();
}
Angular University
quelle
2
In meiner benutzerdefinierten Direktive funktioniert es nicht. <button confirmMessage="are you sure?" (click)="delete()">Delete</button>und in meiner Anweisung: (click)="confirmAction($event)dann confirmAction(event) { event.stopPropagation(); };
Saeed Neamati
4
Versuchen Sie auch falsch zurückzugeben
Joshua Michael Waggoner
Es scheint, dass zu dem Zeitpunkt, den Sie eventin der Handler-Funktion behandeln, stopPropogation()nicht verfügbar ist. Ich musste es richtig im Markup machen: `(click) =" foo (); $ event.stopPropogation () "
inorganik
Dies funktioniert nicht, zumindest nicht, wenn es im Ankerelement platziert wird. Die Antwort ist falsch.
Schatten-Assistent ist Ohr für Sie
143

Das Aufrufen stopPropagationdes Ereignisses verhindert die Weitergabe: 

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

Für preventDefaulteinfach zurückfalse

(event)="doSomething($event); false"
Günter Zöchbauer
quelle
Ich habe es nicht selbst versucht, aber github.com/angular/angular/issues/4782 und github.com/angular/angular/pull/5892/files geben an, dass es funktionieren sollte. Das haben sie aber ;am Ende nicht. Ich werde das ändern.
Günter Zöchbauer
1
Sie sprechen davon, Standardaktionen zu verhindern und nicht das Ereignis durch übergeordnete Elemente zu verschieben, worum es bei stopPropagation geht.
Rem
Oh, das ist mein schlechtes. Es tut uns leid.
Günter Zöchbauer
2
Rückkehr false<3
Pawel Gorczynski
Erstaunlich, wie falsche Antworten automatische Upvotes erhalten. Der Code funktioniert einfach nicht.
Schatten-Assistent ist Ohr für Sie
35

Hinzufügen zur Antwort von @AndroidUniversity. In einer einzigen Zeile können Sie es so schreiben:

<component (click)="$event.stopPropagation()"></component>
Dinigo
quelle
Es sollte sich nicht so sehr von Version zu Version ändern, da sie versuchen, den HTML-
Vorlagenstandard beizubehalten
Funktioniert auch perfekt mit Winkel 5.
Imans77
10

Wenn Sie sich in einer an ein Ereignis gebundenen Methode befinden, geben Sie einfach false zurück:

@Component({
  (...)
  template: `
    <a href="https://stackoverflow.com/test.html" (click)="doSomething()">Test</a>
  `
})
export class MyComp {
  doSomething() {
    (...)
    return false;
  }
}
Thierry Templier
quelle
1
Es funktioniert für Klickereignisse. Zumindest in der neuesten Version von Angular2.
Jon
6
Wiederkehrende falseAnrufe preventDefaultnicht stopPropagation.
Günter Zöchbauer
Wenn Sie return false aufrufen, wird die Weitergabe im DOM gestoppt. Überprüfen Sie Ihre Fakten @ GünterZöchbauer Es wird im ng-Buch erwähnt.
Moeabdol
3
@moeabdol ein Link könnte zumindest zeigen, was Sie behaupten, wird aber tatsächlich preventDefaultgenannt. github.com/angular/angular/blob/… , github.com/angular/angular/blob/…
Günter Zöchbauer
1
Richtig! @ GünterZöchbauer Vielen Dank für die Klarstellung. Ich wünschte, ich könnte einen Link teilen. Ich folgte Nate Murrays Rat in seinem Buch "ng-book The Complete Book on Angular 4", falsch zurückzugeben; am Ende einer Funktion zum Stoppen der Ereignisausbreitung im DOM. Er beschreibt es genau so, wie Sie es erwähnt haben. Entschuldigung für das Missverständnis.
Moeabdol
8

Das hat bei mir funktioniert:

mycomponent.component.ts:

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

mycomponent.component.html:

<button mat-icon-button (click)="action($event);false">Click me !<button/>
Brahim JDIDOU
quelle
Diese Lösung hat bei mir in Winkel 5 funktioniert. Danke.
Inbha
5

Ich musste stopPropigationund preventDefaultum zu verhindern, dass ein Knopf einen Akkordeongegenstand erweitert, über dem er saß.

So...

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

Für IE (Internet Explorer) hat nichts funktioniert. Meine Tester konnten mein Modal brechen, indem sie auf die Schaltflächen dahinter im Popup-Fenster klickten. Also habe ich auf einen Klick auf mein modales Bildschirm-Div gewartet und mich erneut auf eine Popup-Schaltfläche konzentriert.

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

ich benutzte

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

Kurz gesagt, trennen Sie einfach andere Dinge / Funktionsaufrufe mit ';' und füge $ event.stopPropagation () hinzu

Ray Dragon
quelle
2

Ich habe gerade eine Angular 6-Anwendung eingecheckt. Event.stopPropagation () funktioniert mit einem Ereignishandler, ohne $ event zu übergeben

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


doSomething(){
   // write any code here

   event.stopPropagation();
}
Dipendu Paul
quelle
1

Deaktivieren Sie den href-Link mit JavaScript

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

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

Wie es auch in TypeScript mit Angular funktionieren sollte (Meine Version: 4.1.2)

Vorlage
<a class="list-group-item list-group-item-action" (click)="employeesService.selectEmployeeFromList($event); false" [routerLinkActive]="['active']" [routerLink]="['/employees', 1]">
    RouterLink
</a>
Typoskript
public selectEmployeeFromList(e) {

    e.stopPropagation();
    e.preventDefault();

    console.log("This onClick method should prevent routerLink from executing.");

    return false;
}

Die Ausführung von routerLink wird jedoch nicht deaktiviert!

Javan R.
quelle
0

Durch Hinzufügen der Funktion false after wird die Ereignisausbreitung gestoppt

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

Dies löste mein Problem, indem ich verhinderte, dass ein Ereignis von einem Kind ausgelöst wurde:

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

JulianRot
quelle
0

Versuchen Sie diese Anweisung

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

Verwendung

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

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