如何防止 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 为 的 div 容器，我的 ts 文件上的函数中的参数"chickenTenders"将返回相同的容器 ...$eventansweredQuestion()

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

我已经尝试过：

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

和：

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

然而，似乎没有一个能够帮助解决这个问题。<div class="cursorPointer">简而言之，我希望该解决方案能够为我提供一种简单的方法来每次访问该父元素 ( )，即使子元素是单击的元素。

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

Answer 1

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

在您的子组件中使用它。

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

Answer 2

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

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

或更好：

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