事件冒泡的Javascript GUI问题

我正在尝试设置一个相当简单（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正确显示，但我无法隐藏它们。我目前正在做的是在显示浮动div的函数中向

$（文档）

附加一个单击处理程序。简化代码如下：

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

（Show绑定到别处的一个

[]

框上）

我遇到的问题是，click事件似乎冒泡了，并且立即执行

函数（）{jqueryObj.hide（）；}

。我尝试在

show（）

中返回

false

，但这似乎无法解决问题。我应该在这里做什么

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

---

在我脑子里，你在找这样的东西吗？我忽略了您的代码，因为它不是标准的jQuery，而且有点抽象。

可能是您的单击处理程序在添加它时被调用了。如果是这种情况，那么您可以通过停止原始单击冒泡来修复它（例如，调用函数

show

）

另一个选择是破解它：

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

---

如果我没记错的话，当您与浮动div交互时，浮动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;