проверить наличие ('div') мыши на ('a') отпуске мыши - PullRequest
Новая
       16

проверить наличие ('div') мыши на ('a') отпуске мыши

5 голосов
/ 11 октября 2011

Моя проблема заключается в следующем: я получил триггер (а) и всплывающее окно (div).DIV не находится внутри якоря.

  • Когда я наведите курсор мыши на a, я хочу, чтобы div появился.
  • Когда я иду от a к div, яхочу, чтобы он оставался видимым.
  • Когда я покидаю div, я хочу, чтобы он закрывался.
  • Когда я нахожу курсор над a и ухожу, не входя в div, я хочу, чтобы div закрывался.

Я понял большую часть этого, но теперь я борюсь с требованием №.2. При проверке наличия отпускания мыши на a, я проверяю, есть ли указатель мыши на элементе div.Если это так, я хочу прервать отпуск мышью.Если нет, я хочу закрыть div.

Что я делаю не так?Это даже правильный способ сделать это?

Вот разметка: 

<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a>
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div>

Вот jQuery: 

$('.popup_toggle').mouseenter(function() {
        var element = $(this).next('.popup_div');
        $.data(this, 'timer', setTimeout(function() {
            element.show(100);
        }, 500));
    });

    $('.popup_toggle').mouseleave(function() {
        clearTimeout($.data(this, 'timer'));
            if($('.popup_div').mouseenter==true)
            {
                return false;
            }
            else
            {
                $('.popup_div').hide(100)
            };
    });

Ответы [ 3 ]

2 голосов
/ 11 октября 2011

То, что вы пытаетесь сделать, довольно просто.При входе в триггер определите панель (слой, всплывающее окно и т. Д.), Сохраните ссылку друг на друга с помощью .data () и попросите обработчики событий проверить, являются ли связанные цели либо триггером (из вида панели), либо панелью (из вида триггера).Я бросил что-то вместе.Посмотрите журнал консоли, чтобы увидеть, как это работает ... http://jsfiddle.net/rodneyrehm/X5uRD/

1 голос
/ 11 октября 2011

Я считаю, что проблема с вашей реализацией состоит в том, что mouseenter на div сработает вскоре после mouseleave с a.

. Это даст вам что-то вроде: 

$('.popup_toggle').mouseenter(function() {
    // Clear any pending "hide" timer
    // Set a show timer
});

$('.popup_toggle').mouseleave(function() {
    // Clear any pending "show" timer
    // Set a hide timer
});

$('.popup_div').mouseenter(function() {
    // Clear any pending "hide" timer
});

Обратите внимание, что вам необходимо убедиться, что вы получаете доступ к одному и тому же таймеру как из события .popup_toggle, так и из события .popup_div.Вы можете рассмотреть возможность использования doTimeout плагина Бена Алмана, чтобы помочь с этим.Это (обычно) приводит к гораздо более четкому коду, чем ручная работа с setTimeout / clearTimeout.

1 голос
/ 11 октября 2011

Это, скорее всего, не сработает ... нет. Я бы посоветовал вам добавить к вашим элементам <div> обратный вызов mouseenter и mouseleave, а также задать им глобальную переменную, которая сообщит другим вашим обратным вызовам, как обрабатывать их события, т.е. не скрывать всплывающее окно при отпускании мыши, иначе скрыть всплывающее окно "или что-то в этом роде.

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

...