CODEWITHSUNDEEP
javascriptjqueryhtml
nrs jayaram
nrs jayaram

Reputation: 3438

Why onmouseout called every option change while inside select tag

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>

Upvotes: 1

Views: 44

Answers (3)

Ram Segev
Ram Segev

Reputation: 2573

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>

Upvotes: 2

Hsueh Ming-Fang
Hsueh Ming-Fang

Reputation: 124

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>

Upvotes: 1

Rajkumar Somasundaram
Rajkumar Somasundaram

Reputation: 1270

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.

Upvotes: 1

Related Questions