SGN SGN - 2 months ago 45
TypeScript Question

Angular 2 mouseover event on div and childs

I have a span child in a div.

On my div I have a

mouseover
event, when I hover on the
span
, my event triggers.

Simple code:

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


What I want is to keep showing my overlay when on child, how do I achieve this?

Answer

mouseenter and mouseleave cover this usecase better because entering a child doesn't mauseleave to fire, only leaving the outside boarder of the actual element does.

See also What is the difference between the mouseover and mouseenter events?