Html 角度2/4如何确定嵌套属性指令中的子指令传播的事件的起源？

我在处理从同一指令的嵌套元素的子元素传播的悬停事件时遇到了一个问题。我对Angular很陌生，所以如果我遗漏了一些明显的东西，请温柔一点并容忍我

我正在努力实现的目标： 我有一个自定义属性指令，我正在编写该指令来创建一个伪维恩图ui模块，当鼠标悬停在该模块上时，圆圈将在其中展开。我的想法是，我试图使用一个自定义指令来实现这一点，行为会根据元素在dom中的位置而变化，如果带有指令标记的元素的父元素不是带有指令标记的另一个元素，那么它将被视为“根圆”，否则，如果带有标记的元素有一个带有指令标记的父元素，则它将被视为一个“子圆”，如下所示

      <div vennCircle diameter="20vh" percentOverlap="35" parentAngle="300" id="smc">
        Parent
        <div vennCircle diameter="30vh" percentOverlap="35" parentAngle="0" id="smc1">
          child 1
        </div>
        <div vennCircle diameter="30vh" percentOverlap="35" parentAngle="90" id="smc2">
          child 2
        </div>
      </div>

下面是创建自定义属性指令的角度文档（我可以发布的链接数量有限）。我试图捕获悬停事件以触发上面代码中的其他行为，它只是更改悬停元素的背景颜色

---

我的问题是： 我遇到的问题是，如果我只悬停在父圈上，一切都会按预期进行，背景颜色也会改变，但是如果我悬停在两个子圈中的任何一个上，它们也会改变颜色，但父圈也会改变颜色，因为事件会传播，下面的图像演示了它的外观：

现在我可能是个新手，但这种行为本身并不让我感到惊讶，我的理解是，事件会传播或冒泡，我的印象是，这应该首先发生在最低层次，然后在层次结构中向上移动。如果我的理解是正确的，那么子循环指令应该首先在子循环悬停时接收悬停事件，然后在树中向上传播到父循环。如果是这样，那么我应该能够在第一次接收到事件时停止事件的传播，只导致子循环改变颜色，但事实并非如此

当我将时间戳打印到控制台时，它显示父循环（“smc”）在其子循环（“smc1”）之前接收事件，如下所示：

ElementRef {nativeElement: div#smc}
1504205896178
ElementRef {nativeElement: div#smc1}
1504205896206

---

我的问题

• 如果可能，我如何防止parent-element指令接收其子元素的悬停事件
• 如果无法执行上述操作，如何确定悬停事件的起源，以便过滤出源自父元素指令中的子元素的事件

---

笔记

• 我目前死心塌地地想通过一个指令来实现这一点，即使这很棘手，我的想法是我希望能够在别处使用这个ui模块，或者与其他人共享它，只需要在module.ts中进行一次声明/导入。我已经意识到，我可以为每种类型的圆创建X个不同的组件/指令，但我不希望这样，这使得我认为使用该模块过于复杂
• 我不希望使用此功能的开发人员必须手动设置html中的事件，属性指令会启用此功能，因此我希望能够使用它

---

提前感谢大家的帮助，如果您需要更多信息，或者如果我做错了什么，请发表评论，记住我是新手，正在学习

AFAIK

mouseevent

没有冒泡<代码>鼠标悬停已关闭bubbling@yurzui我不确定你想说什么，我发布的代码中唯一被监听的事件是“mouseenter”，你能详细说明一下吗？@yurzui在阅读了关于你提到的两种事件类型的更多文档后，你的评论回答了我的问题。我在上面使用的Mouseenter实际上并没有冒泡，因此在dom层次结构的所有级别上都会触发，在我的例子中，这导致了看起来像是反向冒泡的情况。另一方面，Mouseover正在冒泡，从dom层次结构的最低级别开始，可以被拦截和停止。如果你想要分数/任何东西，请随意写下来作为答案，否则我会在一天左右写下答案。谢谢

ElementRef {nativeElement: div#smc}
1504205896178
ElementRef {nativeElement: div#smc1}
1504205896206