Angular8中如何防止事件冒泡？

Question

请理解，我是 Angular 的新人，正在全面发展，所以这可能是一个非常没有经验的问题。

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

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 参数将返回相同的容器 answeredQuestion() 我的 ts 文件上的函数...

我已经在网上搜索过 () 但在这个例子中，学生问的问题来自指令，所以我对解决方案可能是什么感到困惑...

我已经试过了：

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

并且：

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

然而，none 似乎对事业有所帮助。简而言之，我希望该解决方案能给我一种每次都能访问 parent 元素 (<div class="cursorPointer">) 的简单方法，即使单击的是 child 元素。

谢谢你们抽出时间来，我很感激。

Answer 1

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

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

或更好：

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

Answer 2

您可以使用 template reference variable 获取对所需元素的引用。

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

Answer 3

您可以在 angular 中处理事件传播（冒泡）。

在您的子组件中使用它。

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

Angular8中如何防止事件冒泡？

How to prevent event bubbling in Angular 8?

javascript

html

angular

event-propagation