Javascript-форум - Проблема с событием js при открытии выпадающего списка в Firefox

Цитата:

Сообщение от Griffter (Сообщение 426742)

когда открываешь выпадающий список и пытаешься выбрать элемент, то оно считает, что я нахожусь за пределами браузера или не в этом диве, и срабатывает mouseout/mouseleave

А если остановить событие mouseout при наведении на select?

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
   <style>
body {width: 100%;
height: 100%}
#modal_form {
    position: fixed;
    display: block;
    opacity: 0;
    z-index: 5;
    background: green;
    -webkit-background-size: cover;
    background-size: cover;
    width: 200px;
    height: 200px;
    border: 4px solid #ff0000;
}
#modal_form #modal_closes {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    display: block;
}
#overlay {
    z-index:3;
    position:fixed;
    background-color:#000;
    opacity:0.8;
    -moz-opacity:0.8;
    filter:alpha(opacity=80);
    width:100%;
    height:100%;
    top:0;
    left:0;
    display:none;
}
</style>
 
<script>
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    } else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}
addEvent(window, "load", function (e) {
    $('#modal_form').css('display', 'none');
    addEvent(window, "mouseout", function (e) {
        e = e ? e : window.event;
        var from = e.relatedTarget || e.toElement;
        if (!from || from.nodeName == "HTML") {
        $('#overlay').fadeIn(400, function(){
            $('#modal_form').css('display', 'block').animate({opacity: 1, top: '26%'}, 200);
        });
        }
    });
});
$(document).ready(function() {
    $('#modal_close, #overlay').click( function(){
        $('#modal_form').animate({opacity: 0, top: '45%'}, 200, function(){
            $(this).css('display', 'none');
            $('#overlay').fadeOut(400);
        });
    });
//Добавила 3 строчки
	$('select, option').hover(function(event){
		event.stopPropagation(); 
	})
})
</script>
     
</head>
<body>
    <select name="srok">
            <option value="">Выберите срок...</option>
            <option value="0.1">1 неделя</option>
            <option value="0.2">2 недели</option>
            <option value="0.3">3 недели</option>      
    </select>
     <select name="srok">
             <option value="">Выберите срок...</option>
             <option value="0.1">1 неделя</option>
             <option value="0.2">2 недели</option>
             <option value="0.3">3 недели</option>     
     </select>
<div id="modal_form" style="display:none">
    <div class="wrap-close">
        <span id="modal_close"></span>
    </div>
</div>
    <div id="overlay"></div>
    </body>
</html>