div和childs上的Angular 2 mouseover事件

Question

我有一个跨越孩子的div.

在我的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();
}

我想要的是在孩子身上继续显示我的叠加层,我该如何做到这一点？

Answer 1

mouseenter并且mouseleave更好地覆盖这个用例,因为进入一个孩子不会mouseleave开火,只留下实际元素的外边界使其开火.

另请参阅mouseover和mouseenter事件之间的区别是什么？