javascript - jQuery triggers out event even though it should be still in

Question

I am facing a rather awkward problem. I register two event handlers, one for mouseenter and one for mouseout for the li elements on the page. It has multiple div areas inside it. When I leave the li element it calls the out handler, which is ok. What is not ok is that the out handler is also triggered when I leave a div inside that li.

Below is an image that illustrates it. The blue area is the li element which I register an enter and out event for.

I tried to register handlers on the inner divs that would stop the propagation but it only results in the triggering of the out handler when I enter those inner divs.

Any idea what is going wrong here?

Answer 1

Use mouseleave instead of mouseout. Mouseout triggers everytime your mouse is going off from exactly atop of the target. So when you enter the divs, your mouse goes out of the li and on the div. But it is still inside the LI of course, using mouseleave will make it work.

From JQuery doc:

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.