对除法内的元素禁用（单击）-Angular / Typescript

Question

我正在为我的Web开发项目使用angular / typescript。

我正在寻找一种有效的方法，将(click)事件仅应用于一个部门，而不应用于其内部的某些选择性元素。

例如，考虑除法：

<div class='card' (click)="card_click()">
    <button (click)="whatever($event)">Save</button>
</div>

在这里，单击按钮将调用这两个功能。

在函数中捕获事件并调用event.stopPropagation()并停止传播是很常见的。

但是在特殊情况下，例如下拉菜单（考虑下图），这件事可能会变得棘手。

我可以使用卡的事件来检查鼠标单击的目标以达到相同的效果。

我不会说这是最有效的方法，但是它仍然有效。

HTML：

<div class='card' (click)="card_click($event)">
    <button (click)="whatever($event)">Save</button>
</div>

打字稿：

card_click(event) {

    //dropdown button catches SPAN or A
    if(event.target.tagName == "SPAN" || event.target.tagName == "A") {
        event.stopPropagation()
    }
    //do the rest
}

我不喜欢这种解决方案，因为每次我在卡上添加新元素时，都必须编辑此功能。

还有其他整洁解决方案吗？

谢谢

Answer 1

您可以通过多种方式检查目标，一种是使用contains。像这样e.target.classList.contains("innerElement")

然后仅在“ innerElement”点击事件上调用stopPropagation()。

因此，您可以在需要时使用诸如“ prevent-bubble”之类的类名，而不必每次都更改功能。

https://stackblitz.com/edit/angular-jh9dpe