为什么onmouseout会在select标签内调用每个选项更改

Question

The multiple select option call onmouseout function for every option change without come out from select box, May I know the reason for this event issue?

Bug fixed while remove the multiple attribute from the select tag.

 function mout(e){ console.log("mouse is out"); } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <select id="x" multiple onmouseout="mout(this)"> <option value="1">11:00 10-10-2017</option> <option value="2">11:00 10-10-2017</option> <option value="3">13:00 10-10-2017</option> </select> 

Answer 1

Use mouseleave .

The mouseout event triggers when the mouse pointer leaves any child elements as well the selected element.

The mouseleave event is only triggered when the mouse pointer leaves the selected element.

 function mout(e){ console.log("mouse is out"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <select id="x" multiple onmouseleave="mout(this)"> <option value="1">11:00 10-10-2017</option> <option value="2">11:00 10-10-2017</option> <option value="3">13:00 10-10-2017</option> </select> 

Answer 2

On mouseout is similar to onfocusout; when select has multiple enabled the UI is such that onmouseout = onfocusout = onhover;

Same not in multiple disabled during which we have a traditional dropdown wherein onmouseout is triggered after clicking, changing and then focusing out .

Hope this helps.

Answer 3

You can be used mouseleave on jQuery.

 $( "#x" ).on( "mouseleave", function(e) { console.log("mouse is out"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> <select id="x" multiple> <option value="1">11:00 10-10-2017</option> <option value="2">11:00 10-10-2017</option> <option value="3">13:00 10-10-2017</option> </select>