Dừng truyền sự kiện chuột

Cách dễ nhất để ngăn chặn sự lan truyền sự kiện chuột trong Angular 2 là gì? Tôi có nên vượt qua $eventđối tượng đặc biệt và gọi cho stopPropagation()mình hoặc có một số cách khác. Ví dụ, trong Meteor tôi chỉ có thể trở về falsetừ bộ xử lý sự kiện.

Nếu bạn muốn có thể thêm phần này vào bất kỳ phần tử nào mà không phải sao chép / dán cùng một mã nhiều lần, bạn có thể tạo một lệnh để làm điều này. Nó đơn giản như dưới đây:

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

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

Sau đó, chỉ cần thêm nó vào phần tử bạn muốn:

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

Đơn giản nhất là gọi lan truyền dừng trên một trình xử lý sự kiện. $eventhoạt động tương tự trong Angular 2 và chứa sự kiện đang diễn ra (bằng cách nhấp chuột, sự kiện chuột, v.v.):

(click)="onEvent($event)"

trên bộ xử lý sự kiện, chúng ta có thể dừng việc truyền bá:

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

Kêu gọi stopPropagationsự kiện này ngăn cản sự lan truyền: 

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

Để preventDefaulttrở vềfalse

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

Thêm vào câu trả lời từ @AndroidUniversity. Trong một dòng duy nhất bạn có thể viết nó như vậy:

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

Nếu bạn đang ở trong một phương thức bị ràng buộc với một sự kiện, chỉ cần trả về false:

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

Điều này làm việc cho tôi:

mycomponent.component.ts:

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

mycomponent.component.html:

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

Tôi đã phải stopPropigationvà preventDefaultđể ngăn một nút mở rộng một vật phẩm accordion mà nó ngồi phía trên.

Vì thế...

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

Không có gì hoạt động cho IE (Internet Explorer). Những người thử nghiệm của tôi đã có thể phá vỡ phương thức của tôi bằng cách nhấp vào cửa sổ bật lên trên các nút phía sau nó. Vì vậy, tôi đã nghe một nhấp chuột vào div màn hình phương thức của mình và buộc phải tập trung vào một nút bật lên.

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

Tôi đã sử dụng

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

trong ngắn hạn, chỉ tách biệt các cuộc gọi / chức năng khác với ';' và thêm $ event.stopPropagation ()

Tôi vừa kiểm tra trong một ứng dụng Angular 6, event.stopPropagation () hoạt động trên một trình xử lý sự kiện mà không vượt qua $ event

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


doSomething(){
   // write any code here

   event.stopPropagation();
}

Vô hiệu hóa liên kết với JavaScript

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

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

Cách thức hoạt động trong TypeScript với Angular (Phiên bản của tôi: 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;
}

Nhưng nó không vô hiệu hóa việc thực thi bộ định tuyến!

Thêm false sau chức năng sẽ dừng lan truyền sự kiện

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

Điều này đã giải quyết vấn đề của tôi, từ việc ngăn chặn rằng một sự kiện bị trẻ em sa thải:

doSmth(){
  // what ever
}

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

Hãy thử chỉ thị này

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

Sử dụng

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

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