事件冒泡的 Javascript GUI 问题答案

【问题标题】：Javascript GUI issues with event bubbling事件冒泡的 Javascript GUI 问题
【发布时间】：2009-10-06 03:52:57
【问题描述】：

我正在尝试设置一个相当简单的 (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(); } 立即执行。我尝试在show() 中返回false，但这似乎并没有解决问题。我应该在这里做什么？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这可能是您的点击处理程序在添加它的同一点击中被调用。如果是这种情况，那么您可以通过阻止原始点击冒泡来修复它（例如，任何调用您的函数show）。

另一种选择是破解它：

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

【讨论】：

【解决方案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;

【讨论】：