如何防止 Angular 8 中的事件冒泡？

Question

请理解，我是 Angular 的新手并且正在全面开发，所以这可能是一个非常缺乏经验的问题。

问题是我从组件的 HTML 模板文件中调用一个函数，并以 $event 作为参数，它最终捕获了一个与我希望定位的元素不同的元素。 我称之为事件的那个确切元素有两个孩子......

HTML：

          <div class="cursorPointer" (click)="answeredQuestion($event)">
                <div id="chickenTenders" class="backImageCov question_0Img"></div>
                <h3 class="questionSubTitle">Chicken Tenders</h3>
           </div>

我的目标是每次调用此事件时都使用"cursorPointer"检索 div 容器。 我假设这是一个事件冒泡问题，因为如果我单击 ID 为"chickenTenders"的 div 容器，那么我的 ts 文件上的"chickenTenders" answeredQuestion()函数中的$event参数将返回同一个容器...

我已经在网上搜索过（ 停止鼠标事件传播），但在这个例子中，学生提出了一个来自指令的问题，所以我对解决方案感到困惑......

我已经尝试过：

(click)="answeredQuestion(0, $event);false"

和：

(click)="answeredQuestion(0, $event); $event.stopPropagation()"

然而，似乎没有任何帮助。 简单地说，我希望该解决方案能给我一个简单的方法来每次都访问该父元素（ <div class="cursorPointer"> ），即使子元素是被点击的元素。

谢谢你们的时间，我很感激。

Answer 1

如果您使用 CSS 禁用子元素的指针事件会怎样？

.cursorPointer > div, .cursorPointer > h3{
    pointer-events: none;
}

或更好：

.cursorPointer > * {
    pointer-events:none;
}

Answer 2

您可以以角度处理事件传播（冒泡）。

在您的子组件中使用它。

onClick(event: Event) {
    event.stopPropagation();
    // do your stuff
  }

Answer 3

您可以使用模板引用变量来获取对所需元素的引用。

<div #clickElement class="cursorPointer" (click)="answeredQuestion(clickElement)">