Hentikan propagasi acara mouse

Apa cara termudah untuk menghentikan penyebaran acara mouse di Angular 2? Haruskah saya melewati $eventobjek khusus dan memanggil stopPropagation()diri sendiri atau ada cara lain. Sebagai contoh di Meteor saya hanya bisa kembali falsedari event handler.

Jika Anda ingin dapat menambahkan ini ke elemen apa pun tanpa harus menyalin / menempel kode yang sama berulang-ulang, Anda dapat membuat arahan untuk melakukan ini. Sesederhana seperti di bawah ini:

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

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

Kemudian tambahkan saja ke elemen yang Anda inginkan:

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

Yang paling sederhana adalah memanggil propagasi stop pada pengendali event. $eventberfungsi sama di Angular 2, dan berisi acara yang sedang berlangsung (dengan klik mouse, acara mouse, dll.):

(click)="onEvent($event)"

pada pengendali acara, kita dapat menghentikan propagasi di sana:

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

Memanggil stopPropagationacara mencegah propagasi: 

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

Untuk preventDefaultkembali sajafalse

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

Menambah jawaban dari @AndroidUniversity. Dalam satu baris Anda dapat menulis seperti ini:

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

Jika Anda menggunakan metode yang terikat pada suatu acara, kembalikan false:

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

Ini bekerja untuk saya:

mycomponent.component.ts:

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

mycomponent.component.html:

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

Saya harus stopPropigationdanpreventDefault untuk mencegah tombol memperluas item akordeon yang ada di atasnya.

Begitu...

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

Tidak ada yang berfungsi untuk IE (Internet Explorer). Penguji saya dapat merusak modal saya dengan mengklik jendela popup pada tombol di belakangnya. Jadi, saya mendengarkan klik pada div layar modal saya dan memaksa memfokuskan kembali pada tombol sembulan.

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

Saya menggunakan

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

singkatnya pisahkan panggilan fungsi / fungsi lain dengan ';' dan tambahkan $ event.stopPropagation ()

Saya baru saja memeriksa aplikasi Angular 6, event.stopPropagation () berfungsi pada event handler tanpa melewati $ event

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


doSomething(){
   // write any code here

   event.stopPropagation();
}

Nonaktifkan tautan href dengan JavaScript

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

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

Bagaimana seharusnya juga bekerja di TypeScript dengan Angular (Versi Saya: 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;
}

Tetapi itu tidak menonaktifkan eksekusi dari routerLink!

Menambahkan false setelah fungsi akan menghentikan propagasi acara

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

Ini menyelesaikan masalah saya, dari preventign bahwa suatu peristiwa dipecat oleh anak-anak:

doSmth(){
  // what ever
}

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

Coba petunjuk ini

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

Pemakaian

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

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