禁用（单击）划分内的元素 - Angular/Typescript答案

【问题标题】：Disable (click) for element inside division - Angular/Typescript禁用（单击）划分内的元素 - Angular/Typescript
【发布时间】：2019-03-08 07:29:27
【问题描述】：

我正在为我的 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
}

我不会喜欢这个解决方案，因为每次我在卡片上添加一个新元素时，我都必须编辑这个函数。

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

谢谢

【问题讨论】：

(click)="card_click(); event.stopPropagation()"
如果target与下拉列表相同，则可以在捕获阶段和event对象中添加点击事件侦听器，不要调用event.stopPropagation()
我已经编辑了我的问题以提供更多关于相同问题的详细信息
如果您将div 元素视为button，问问自己：将一个按钮嵌套在另一个按钮中真的有意义吗？可以以任何形式更改此布局吗？
请看我更新的答案

标签： angular typescript

【解决方案1】：

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

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

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

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

【讨论】：

我已经在使用它了（参考我的问题）。但是，这在未注册点击事件的下拉列表等中是不可能的。
抱歉，我更新了答案，在调用stopPropagation()之前显示了对目标的检查