Javascript GUI проблемы с пузырьками событий

Question

Я пытаюсь настроить довольно простой (imo) графический интерфейс Javascript и сталкиваюсь с проблемами. Я использую JQuery. Вот что я хочу сделать:

Рядом с текстом есть несколько квадратов, например:

[ ] Text next to square
[ ] Text next to square 2
[ ] Text next to square 3
[ ] Text next to square 4

Когда вы нажимаете на один из квадратов, появляется абсолютно позиционированный плавающий элемент div. Этот плавающий div имеет несколько параметров интерфейса.

В этот момент, если пользователь щелкнет в любом месте за пределами плавающего div, div должен исчезнуть. Если пользователь щелкнет другое поле, исходный div должен исчезнуть, а новый должен появиться.

Я могу заставить правильно отображаться плавающие дивы, но у меня возникают проблемы с их сокрытием. В данный момент я прикрепляю обработчик щелчка к $(document) в функции, которая показывает плавающий div. Упрощенный код ниже:

show(jqueryObj)
{
    jqueryObj.show();
    $(document).one("click", function () { jqueryObj.hide(); });
}

(Шоу связано с облизыванием одного из [ ] полей в другом месте)

Проблема, с которой я сталкиваюсь, заключается в том, что событие click кажется всплывающим, и function () { jqueryObj.hide(); } выполняется немедленно. Я пытался вернуть false в show(), но это, похоже, не решило проблему. Что мне здесь делать?

Answer 1

$(document).click(function(e) {
    e.stopPropagation();
    var el = $(e.target);
    alert( el.get(0).nodeName );
});

С макушки головы, ты ищешь что-то подобное? Я проигнорировал ваш код, потому что он не стандартный jQuery и немного абстрагирован.

Answer 2

Если я вас правильно понял, ваш плавающий div исчезает, когда вы взаимодействуете с ним, потому что тот щелчок документа ловит взаимодействие и скрывает его. Если это так, вам нужно проверить цель вашего события и выйти, если это плавающий div. Примерно так:

$(document).click(function(e) {
    var target = $(e.target);
    if (target.is("#floatingDiv")) return;
    jqueryObj.hide();
});

Надеюсь, что поможет

Редактировать: Следует отметить, что вы можете проверить несколько условий в вызове .is(). Так, например, вы можете проверить наличие кликов на плавающем элементе div И на одном из ваших полей активации:

if (target.is("#floatingDiv, .activateBox")) return;

Answer 3

Может случиться так, что ваш обработчик кликов вызывается для того же клика, в который он был добавлен. Если это так, то вы бы это исправили, остановив исходящий клик от всплывающего сообщения (например, независимо от того, что вызывает ваша функция show).

Другой вариант - взломать его:

show(jqueryObj)
{
    jqueryObj.show();
    setTimeout(function() {
        $(document).one("click", function () { jqueryObj.hide(); });
    }, 0);
}