div和childs上的Angular 2鼠标悬停事件答案

【问题标题】：Angular 2 mouseover event on div and childsdiv和childs上的Angular 2鼠标悬停事件
【发布时间】：2017-02-07 15:25:42
【问题描述】：

我在一个 div 中有一个 span 孩子。

在我的 div 上，我有一个 mouseover 事件，当我将鼠标悬停在 span 上时，我的事件就会触发。

简单代码：

<div (mouseover)="showOverlay($event, FooBar)" (mouseleave)="showOverlay($event, FooBar)">
    <span>{{ someDataHere }}</span>
</div>


 public showOverlay($event, op, element): void {
    op.toggle($event, element);
    $event.preventDefault();
}

我想要的是在孩子身上继续显示我的叠加层，我该如何实现？

【问题讨论】：

也许mouseenter mouseleave 更适合你的情况stackoverflow.com/questions/1104344/…
@GünterZöchbauer，你是对的，谢谢。如果您将此作为答案发布，我会接受它

标签： javascript angular typescript

【解决方案1】：

mouseenter 和 mouseleave 更好地涵盖了这个用例，因为输入一个子元素不会触发 mouseleave，只留下实际元素的外部边框会触发它。

另见What is the difference between the mouseover and mouseenter events?

【讨论】：