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

Question

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

Answer 1

The mouseleave event differs from mouseout in the way it handles event bubbles. If the mouse was used in this example, then when the mouse pointer moves out of the internal element, the handler will be launched. This is usually an undesirable behavior. On the other hand, the mouseleave event fires only its handler when the mouse leaves the element to which it is bound, and not the child. Thus, in this example, the handler starts when the mouse leaves the Outer element, but not the Inner element.

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

Surprisingly, there are many results @ http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=jquery+mouseleave+mouseout+difference

Answer 2

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

For example, suppose you have created a tooltip that you want to display next to an item on the mouseenter . You use setTimeout to prevent the tooltip from popping up. You clear the timeout on mouseleave with clearTimeout , so if the mouse does not exit, a tooltip will not be displayed. This will work in 99% of cases.

But now let's say that the element to which you attach the tooltip has a button with a click event, and let's also assume that this button offers the user either a confirm field or an alert field. The user clicks the button, and the alert triggered. The user clicked it fast enough so that your tooltip didn't have the ability to pop up (so far so good).

The user clicks the OK button alert OK, and the mouse leaves the item. But since the browser page is now in a locked state, javascript will not light up until you mouseleave OK, which means your mouseleave WILL NOT FIRE event. After the user clicks OK, a tooltip pops up (which you don't need).

Using mouseout in this case would be a suitable solution because it works.

Answer 3

jQuery API doc:

mouseout

This type of event can cause a lot of headaches due to event bubbles. For example, when the mouse moves from an Inner element in this example, a mouseout event will be sent to it, and then it will filter to Outer. This may invoke the associated mouseout handler at inopportune times. See Discussion for .mouseleave () for a useful alternative.

So mouseleave is a custom event that was designed for the above reason.

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