事件冒泡的Javascript GUI问题

Question

我正在尝试设置一个相当简单（imo）的Javascript GUI，并且遇到问题。我正在使用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应该消失，并且应该出现一个新的。

我能够正确显示浮动div，但是我无法隐藏它们。我目前正在做的是在显示浮动div的函数中将一个单击处理程序附加到$(document)。简化代码如下：

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

（显示在其他地方的[ ]框之一上舔舔

我遇到的问题是点击事件似乎冒出来，并立即执行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

可能是你的点击处理程序被调用它所添加的相同点击。如果是这种情况，那么你可以通过停止冒泡的原始点击来修复它（例如，无论是调用你的函数show ）。

另一种选择是破解它：

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

Answer 3

如果我让你正确，你的浮动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;