Проблема с событием js при открытии выпадающего списка в Firefox
Здравствуйте уважаемые разработчики!
Нужна ваша помощь! Сразу говорю, что в js не силен, так что за код сильно не критикуйте. Кратко объясняю суть проблемы: у меня есть всплывающее окно, которое срабатывает, если мышка покидает пределы окна. В Chrome и в Opera всё работает нормально, а вот в Firefox есть проблема... событие mouseout срабатывает и тогда, когда хочешь выбрать элемент из всплывающего списка. 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(document, "mouseout", function (e) { e = e ? e : window.event; var from = e.relatedTarget || e.toElement; console.log(from); if (!from || from.nodeName == "HTML") { $('#overlay').fadeIn(400, function(){ $('#modal_form').css('display', 'block').animate({opacity: 1, top: '26%'}, 200); }); } } }); }); В Firefox при наведении на элемент выпадающего списка переменная var from = undefined, а в Chrome к примеру всё нормально, там функция addEvent(document, "mouseout", function (e)) даже не срабатывает на выпадающем списке. Подскажите пожалуйста, как можно исправить эту проблему с выпадающим списком в Firefox? или возможно нужно другое событие использовать? Вот пример: <html> <head> <script src="//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); }); }); }) </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> |
Griffter,
может покажите исполняемый пример работы Вашего скрипта? |
Цитата:
Проблема в 12-й строке. ФФ не знает ни того, ни другого, поэтому ундефайнед. А зачем такая экзотика в 12-й? |
Griffter,
Цитата:
И тогда не надо будет искать target |
Заделйте этот код на jsfiddle.net, пожалуйста. Перед выполнением 11 строки e случайно не undefined?
|
А если мышь уйдет вниз на строку состояния Windows 7,8,10, то тоже должно всплывать это окно? Если честно, как пользватель я не люблю эти всплывающие окна, достали они меня.
|
Цитата:
|
Цитата:
Цитата:
|
Цитата:
Проблема в том, что когда открываешь выпадающий список и пытаешься выбрать элемент, то оно считает, что я нахожусь за пределами браузера или не в этом диве, и срабатывает mouseout/mouseleave |
Цитата:
Цитата:
Я тоже не люблю, но что же поделаешь.. |
Куда залил?
Цитата:
|
Strongman,
Вы правы, событие срабатывает и окно выпадает. То просто данные закешировались у меня.. Добавил к своему посту исполняемый код. |
Цитата:
<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> |
Manyasha,
Великодушно благодарен Вам за помощь!:thanks: |
Часовой пояс GMT +3, время: 04:23. |