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

【问题标题】：How to prevent event bubbling in Angular 8?如何防止 Angular 8 中的事件冒泡？
【发布时间】：2020-05-16 11:49:29
【问题描述】：

请理解，我是 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 文件上的 answeredQuestion() 函数中的 $event 参数将返回相同的容器。 .

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

我已经试过了：

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

还有：

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

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

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

【问题讨论】：

为什么你先用一个参数调用answeredQuestion，然后用两个参数？
嗯，这与问题的重点几乎没有关系。但是，这是堆栈溢出中的编辑错误。为了简化它并使主要问题更容易理解，我不得不更多地编辑我的代码。那里有不必要的代码。把它想象成它最初只有一个参数......（$事件参考。）谢谢你的评论顺便说一句

标签： javascript html angular event-propagation

【解决方案1】：

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

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

或者更好：

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

【讨论】：

【解决方案2】：

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

在您的子组件中使用它。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：