Question

在我的Angular 4应用程序中，我有一个带有（dblclick）处理程序的父组件和一个带有（单击）处理程序的子组件。

component.html

<mat-list (dblclick)="goBack()">
    <button (click)="add($event)"> Add </button>
</mat-list>

component.ts

add(event){
    event.stopPropagation();
    doSomething();
}

但是，从我看到的情况来看，stopPropagation只会停止相同类型的事件。在此示例中，如果有人双击该按钮，则会调用goBack（）函数。如果我将父组件的事件更改为单个（单击）事件，则传播将停止。

我有没有通过孩子的（点击）事件来阻止父母的（dblclick）？

提前致谢。

Answer 1

您可以尝试以下内容。我认为这是最简单的方法。

event.target始终引用父级内分配事件的最高层。您可以逐个比较target或者id，而不是nodeName，以确保它是一个右键。

<mat-list (dblclick)="goBack($event)">
    <button (click)="add($event)"> Add </button>
</mat-list>

goBack(event){
    if(event.target.nodeName === "BUTTON"){
       return;
    }
    doSomething();
}

add(event){
    event.stopPropagation();
    doSomething();
}

在这里你有time complexity

不同事件的角停止传播

1 个答案: