不同事件的角停止传播

Posted 2023-05-07

【中文标题】不同事件的角停止传播

【英文标题】：Angular Stop Propagation of Different Event

【发布时间】：2018-09-23 08:04:34

【问题描述】：

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

component.html

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

组件.ts

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

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

无论如何我可以通过孩子的 (click) 事件阻止父母中的 (dblclick) 吗？

提前致谢。

【问题讨论】：

你想在单击右键时阻止（dblclick）？

如何将EventEmitter 用作子级的@output，可以在parentComponent 的ngOnChanges(changes: SimpleChanges) 函数中进行监控。您无法控制父 dblclick 事件，但您当然可以设置一个boolean，它可以允许执行goBack() 函数。我希望它有所帮助

这是个好主意。不幸的是，我的问题不准确。 child 不是 Angular 组件，它只是一个 HTML 按钮。如果我要走这条路，我必须把它变成一个实际的组件。

【参考方案1】：

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

event.target 总是指分配事件的父级中的最高层。除了 nodeName，您还可以按类或 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

【讨论】：

太棒了，这将工作，谢谢。我假设我可以从 add 事件中删除 stopPropagation，因为父级上没有（单击）事件