What is the difference between jQuery's mouseout() and mouseleave()?

Question

What is the difference between jQuery's mouseout() and mouseleave()?

Bailes

api.jquery.com/mouseout and api.jquery.com/mouseleave are useful – Gavrah

Note: equivalent is mouseover, and equivalent to mouseleave is mouseenter. – Hugo

Answer 1

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.

Source: http://api.jquery.com/mouseleave/

Kief

mouseover vs. mouseenter: jsfiddle.net/hejdav/945pv53h/3 (mouseout & mouseleave equivalently) – Joyless

Explanation above gets much more clear when seeing both methods working and the difference between them, worked for me. – Talkathon

Answer 2

There can be times when mouseout is a better choice than mouseleave.

For example, let's say you've created a tooltip that you want displayed next to an element on mouseenter. You use setTimeout to prevent the tooltip from popping up instantly. You clear the timeout on mouseleave using clearTimeout so if the mouse leaves the tooltip won't be displayed. This will work 99% of the time.

But now let's say the element you have a tooltip attached to is a button with a click event, and let's also assume this button prompts the user with either a confirm or alert box. The user clicks the button and the alert fires. The user pressed it fast enough that your tooltip didn't have a chance to pop up (so far so good).

The user presses the alert box OK button, and the mouse leaves the element. But since the browser page is now in a locked state, no javascript will fire until the OK button has been pressed, meaning your mouseleave event WILL NOT FIRE. After the user presses OK the tooltip will popup (which is not what you wanted).

Using mouseout in this case would be the appropriate solution because it will fire.

Hermanhermann

Could you explain why mouseout in that case will fire? Wouldn't the browser be still in locked state for mouseout? – Sherborn

Answer 3

jQuery API doc:

mouseout

This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the Inner element in this example, a mouseout event will be sent to that, then trickle up to Outer. This can trigger the bound mouseout handler at inopportune times. See the discussion for .mouseleave() for a useful alternative.

So mouseleave is a custom event, which was designed because of the above reason.

http://api.jquery.com/mouseleave/

Arezzo

Answer 4

Event Mouseout will trigger when mouse leaves the selected element and also when mouse leaves it's child elements also.

Event Mouseleave element will trigger when pointer will leave the selected element only.

Reference: W3School

Throve

Answer 5

I encountered a similar problem using plan Javascript instead of jquery, but they're some how related and I'll leave my two cents in case someone else is on the search nowadays.

I was trying to use the mouseout event on a navigation menu. The parent div had a submenu composed of a list of uls elements. When I tried to navigate to the div children elements the mouseout event was fired. This was not my desired output.

From the docs

mouseout is also delivered to an element if the cursor enters a child element, because the child element obscures the visible area of the element.

And that was the issue.

The mouseleave event did not have this issue. Just using it made things work for me.

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event

Upbringing