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

Question

请理解，我是新的角度和发展的整体，所以这可能是一个非常没有经验的问题。

问题是，我用$event作为参数从组件的HTML文件中调用一个函数，它最终捕获了一个与我希望目标的元素不同的元素。我称之为这个活动的确切元素有两个孩子..。

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容器，这个容器将由$event参数在我的ts文件中的answeredQuestion()函数中返回……

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

我已经试过了：

(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)">