Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.03.2011, 23:01
Новичок на форуме
Отправить личное сообщение для SlavaMvv Посмотреть профиль Найти все сообщения от SlavaMvv
 
Регистрация: 07.03.2011
Сообщений: 3

События mouseEnter и mouseLeave
Приветствую всех! При реализации всплывающих попапов при наведении на ссылку столкнулся с проблемой бесконечной генерации событий mouseenter и mouseleave в том случае, когда всплывающий попап перекрывает область элемента, на который навешены события - происходит мерцание попапа при нахождении мышли в области, где перекрываются элементы управления.
Пожалуйста, подскажите, как можно решить (обойти) эту проблему. Ниже пример кода и несколько скриншотов.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Mouse enter | mouse leave test</title>
    <style type="text/css">
        a
        {
            display:block; 
            text-align:center;
            width:200px;
            height:50px;
            top: 120px;
            left: 182px;
            position: absolute;
            background: #F9A;
        }
        
        div
        {
            background: Yellow;
            border: solid Orange 1px;
            width: 159px;
            height: 181px;
            top: 26px;
            left: 67px;
            position: absolute;
            display: none;
            opacity: 0.5;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.5.js"></script> 
    <script type="text/javascript">
        $(document).ready(function () {
            $('#aTest').mouseenter(function () {
                $('#popup').show();
            });

            $('#aTest').mouseleave(function () {
                $('#popup').hide();
            });
        });
     </script>
</head>
<body>
    <a id="aTest" href="#">Н А В Е Д И</a>
    <div id="popup">
        <strong>Заголовок</strong>
        <p>Текст, текст, текст, текст, текст, текст</p>
        <p>Текст, текст, текст</p>
    </div>
</body>
</html>
Изображения:
Тип файла: jpg enter.JPG (7.5 Кб, 20 просмотров)
Тип файла: jpg leave.JPG (3.3 Кб, 7 просмотров)

Последний раз редактировалось SlavaMvv, 07.03.2011 в 23:09.
Ответить с цитированием
  #2 (permalink)  
Старый 08.03.2011, 23:23
Новичок на форуме
Отправить личное сообщение для SlavaMvv Посмотреть профиль Найти все сообщения от SlavaMvv
 
Регистрация: 07.03.2011
Сообщений: 3

Проблему решил использованием события mousemove

$(document).ready(function () {
            $(document).mousemove(function (e) {
                var coordinates = getCoordinates('#aTest');

                if (pointInsideElement(e.pageX, e.pageY, coordinates.Left,
                    coordinates.Top, coordinates.Right, coordinates.Bottom)) {
                    $('#popup').show();
                }
                else {
                    $('#popup').hide();
                }
            });

        });

        var valueInRange = function (value, min, max) { return (value >= min) && (value <= max); }
        var pointInsideElement = function (x, y, leftEl, topEl, rightEl, bottomEl) {
            return valueInRange(x, leftEl, rightEl) && valueInRange(y, topEl, bottomEl);
        }
        var getCoordinates = function (selector) {
            var element = $(selector);
            var result = new Object();

            result.Left = element.offset().left;
            result.Top = element.offset().top;
            result.Right = element.offset().left + element.width();
            result.Bottom = element.offset().top + element.height();

            return result;
        }


Тему можно закрывать

Последний раз редактировалось SlavaMvv, 08.03.2011 в 23:25.
Ответить с цитированием
  #3 (permalink)  
Старый 14.03.2011, 16:08
Интересующийся
Отправить личное сообщение для yupee Посмотреть профиль Найти все сообщения от yupee
 
Регистрация: 27.01.2011
Сообщений: 21

а что за такие mouseenter и mouseleave? в чем разница между mouseover и mouseout?
Ответить с цитированием
  #4 (permalink)  
Старый 15.03.2011, 19:44
Новичок на форуме
Отправить личное сообщение для SlavaMvv Посмотреть профиль Найти все сообщения от SlavaMvv
 
Регистрация: 07.03.2011
Сообщений: 3

Отличаются тем, что mouseover и mouseout генерируют соответствующие события у дочерних элементов, а mouseenter и mouseleave - нет. http://api.jquery.com/mouseenter/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
События для вновь-вставленных тегов в DOM Mutagena jQuery 5 12.12.2011 19:56
Вопрос по создании функции для события com-meta jQuery 2 01.10.2010 14:59
как узнать имеется ли обработчик события HelpeR Events/DOM/Window 9 17.02.2010 18:20
Drug&Drop + всплывание события = проблемы =(( _NoName_ Events/DOM/Window 4 05.03.2009 17:47
Явный вызов процедуры обработки события. supchik Общие вопросы Javascript 18 27.01.2009 13:16