Форум

SlavaMvv · #1 (**permalink**) 07.03.2011, 23:01

Приветствую всех! При реализации всплывающих попапов при наведении на ссылку столкнулся с проблемой бесконечной генерации событий 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>

SlavaMvv · #2 (**permalink**) 08.03.2011, 23:23

Проблему решил использованием события 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;
        }

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

yupee · #3 (**permalink**) 14.03.2011, 16:08

а что за такие mouseenter и mouseleave? в чем разница между mouseover и mouseout?

SlavaMvv · #4 (**permalink**) 15.03.2011, 19:44

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

Форум

Справочник

Discord чат

Курсы javascript