jQuery supports the proprietary IE event mouseleave through its
mouseleave() event. More precisely, this event is normalized by jQuery in a cross-browser fashion. As I showed in an earlier post, this event is very handy when you have to develop dynamic menus. The jQuery's documentation reports the following motivation behind the choice of supporting this event:
The mouseleave JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.
In the following image taken from the jQuery's documentation there's an example of how this event works:
There's an outer and an inner element where you can trigger this event. For example, if you want to see this event in action, try to move your mouse from one of these elements to the bar below:
$('#outer').mouseleave(function() {
alert('I am leaving #outer!');
});
The emulation of this event has been achieved by keeping track both of the element's boundaries and mouse coordinates. So when the position of the mouse is beyond the boundaries of the element where the event is attached, then the event handler is triggered. Of course this event has been emulated in those browsers that do not support it natively. Internet Explorer supports it, thus no emulation is required.