Stoppen Sie die Weitergabe von Mausereignissen

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.

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>

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

Das Aufrufen stopPropagationdes Ereignisses verhindert die Weitergabe: 

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

Für preventDefaulteinfach zurückfalse

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

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

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

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

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/>

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...
  }
}

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

ich benutzte

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

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

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

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)

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

Die Ausführung von routerLink wird jedoch nicht deaktiviert!

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

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

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>

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