Angular 2 mouseover event on div and childs

Question

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?

Perhaps `mouseenter` `mouseleave` are a better fit in your case http://stackoverflow.com/questions/1104344/what-is-the-difference-between-the-mouseover-and-mouseenter-events — Günter Zöchbauer, Sep 29 '16 at 10:48
@GünterZöchbauer, you are right, thank you. If you post this as a answer I will accept it — Gerald Hughes, Sep 29 '16 at 11:19

score 24 · Accepted Answer · edited May 23 '17 at 12:03

24

mouseenter and mouseleave cover this use case better because entering a child doesn't mouseleave to fire, only leaving the outside border of the actual element makes it to fire.

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

edited May 23 '17 at 12:03

Community

1
1

answered Sep 29 '16 at 11:21

Günter Zöchbauer

623,577
216
2,003
1,567

Angular 2 mouseover event on div and childs

1 Answers1