A detailed explanation of the differences between MouseLeave and mouseout in jquery

Many people use jquery to implement the mouse hover effect, generally use the mouseover and mouseout this pair of events. And in the implementation process, there may be some unsatisfactory situation.

First look at the effect of using mouseout:

The code is as follows

Copy Code

<p> first look at the effect of using mouseout:</p> <div id= "Container" style= "width:300px;" > <div id= "title" style= "Cursor:pointer; Background: #ccc; " > used the Mouseout event ↓</div> <div id= "list" style= "Display:none; Position:absolute; Background: #fff; border:1px solid #ccc; width:298px; " > <div> First line </div> <div> Second Line </div> <div> Third line </div> </div> </div> <p><script type= ' Text/javascript ' > JQuery (document). Ready (function ($) { $ ("#title"). MouseOver (function () { var offset = $ (this). offset (); $ ("#list"). CSS ({left:offset.left, top:offset.top+19}). Show (); }); $ ("#container"). Mouseout (function () { $ ("#list"). Hide (); }); }); </script>

The first line in the second row. We find that when using the Mouseout event, the mouse Triggers hide () as soon as it moves in the #list of the Drop-down container, because the Mouseout event is bubbling, that is, the event may be bound to the child element of the container at the same time. So it triggers our hide () when the mouse moves out of each child element.

2 mouse events, MouseEnter and MouseLeave, have been added from jquery 1.3. Unlike the Mouseout event, the MouseLeave event is triggered only when the mouse pointer leaves the selected element.

Let's take a look at the effect of the MouseLeave event:

The code is as follows

Copy Code

<div id= "Container2" style= "width:300px;" > <div id= "Title2" style= "cursor:pointer; Background: #ccc; " > used the MouseLeave event ↓</div> <div id= "List2" style= "display:none; Position:absolute; Background: #fff; border:1px solid #ccc; width:298px; " > <div> First line </div> <div> Second Line </div> <div> Third line </div> </div> </div> <script type= ' Text/javascript ' > JQuery (document). Ready (function ($) { $ ("#title2"). MouseOver (function () { var offset = $ (this). offset (); $ ("#list2"). CSS ({left:offset.left, top:offset.top+19}). Show (); }); Binding MouseLeave events, which works fine $ ("#container2"). MouseLeave (function () { $ ("#list2"). Hide (); }); }); </script> <p>

The second line of the first line the third row MouseLeave and Mouseout events are useful because event bubbling is very helpful at some point

Resolving the issue of Div mouseout event bubbling

The workaround is to use the Bind method of jquery

For example: Now there is a div object that needs to monitor his mouse events

The code is as follows

Copy Code

<div class= "dpx2" ><div class= "dpx2_px" style= "cursor:pointer;" id= "Searchsort" > Please select a Sort method ↓</div> <div class= "DPX2_PX_XL" id= "sortlist" style= "Display:none;position:absolute;z-index:5"; > <div><a class= "Sorta" > by Time Ascending ↑</a></div> <div><a class= "Sorta" > Descending by Time ↓</a></div> <div><a class= "Sorta" > by comment Quantity ascending ↑</a></div> <div><a class= "Sorta" > by number of comments descending ↓</a></div> <div><a class= "Sorta" > click number in ascending order ↑</a></div> <div><a class= "Sorta" > Descending by Number of clicks ↓</a></div> </div> </div>

When the mouse moves to the div with ID searchsort, the following div is displayed. When the mouse moves out of the div below, hide the div

JS is:

The code is as follows	Copy Code
$ (function () { var sortlist = $ ("#sortList"); $ ("#searchSort"). MouseOver (function () { var offset = $ (this). offset (); Sortlist.css ("left", offset.left); Sortlist.css ("Top", offset.top+20); Sortlist.show (); }); A key sentence that binds a Div object to the MouseLeave event Sortlist.bind ("MouseLeave", function () { $ (this). Hide (); }); });