Angular4 /子元素不触发父（点击）事件

Posted 2023-05-07

【中文标题】Angular4 /子元素不触发父（点击）事件

【英文标题】：Angular4 / Child element not firing parent (click) event

【发布时间】：2017-12-05 01:17:18

【问题描述】：

我有一个下拉功能，应该通过点击这个 div 来调用它

<div (click)="toggleDropdown($event)" data-id="userDropdown">
 Username <i class="mdi mdi-chevron-down"></i>
</div>

但是当我点击<i>元素时没有触发点击事件

toggleDropdown($event) 
    const id = $event.target;
    document.querySelector('[data-drop=' + id.getAttribute('data-id') + ']').classList.toggle('active');

无论如何我可以让子点击事件触发父点击事件？

Plnkr

【问题讨论】：

显示组件代码。 html 和 toggleDropdown 函数是否属于同一个组件？

是的，它们都在同一个组件中。对不起，我不够清楚

这很奇怪，创建一个 plunker

plnkr.co/edit/ztk6P2kk9J50fXS3vZQE?p=preview

【参考方案1】：

使用$event.currentTarget 而不是$event.target

这样您将获得事件处理程序已附加到的元素。

Plunker Example

阅读全文

https://developer.mozilla.org/en/docs/Web/API/Event/currentTarget