不同事件的角度停止传播

在我的 Angular 4 应用程序中，我有一个带有 (dblclick) 处理程序的父组件和一个带有 (click) 处理程序的子组件。

组件.html

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

组件.ts

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

但是，据我所知，stopPropagation 仅停止相同类型的事件。在此示例中，如果有人双击该按钮，则会调用 goBack() 函数。如果我将父组件的事件更改为单个（单击）事件，传播就会停止。

无论如何，我是否可以通过子级的（单击）事件来阻止父级中的（dblclick）？

提前致谢。

您可以尝试如下所示的操作。我认为这是最简单的方法。

event.target始终指分配事件的父级内部的最高层。您可以按类或 ID 来比较目标，而不是节点名称，以确保它是正确的按钮。

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

在这里你有工作plnkr https://plnkr.co/edit/OELFbUY81m41I76R8mn6?p=preview