事件冒泡的Javascript GUI问题

我想设置一个相当简单的（imo）Javascript GUI，并且遇到问题。我正在使用jQuery。这是我想做的事：事件冒泡的Javascript GUI问题

旁边有一些文字，像这样一堆方块：

[ ] 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，但这似乎并未解决问题。我应该在这里做什么？

来源

2009-10-06 Sam Lee

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

关闭我的头顶，你在找这样的事情吗？我忽略了你的代码，因为它不是标准的jQuery并且有点抽象。

来源

2009-10-06 03:56:52

这可能是因为您的点击处理程序被调用了与添加的点击相同的点击。如果是这种情况，您可以通过停止原始点击（例如，调用您的函数show）来修复它。

另一种选择是破解它：

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

来源

2009-10-06 04:09:09

如果我得到你的权利，你的浮动DIV消失，当你与它进行交互，因为该文件点击捕获互动和隐藏它。如果是这种情况，你需要检查你的事件的目标，并退出，如果它是浮动股利。事情是这样的：

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

希望帮助

编辑：有一点要注意的是，你可以在电话.is()检查多个条件。因此，例如，您可以检查浮动div上的点击以及您的激活框之一：

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

来源

2009-10-06 04:10:43

事件冒泡的Javascript GUI问题

回答

相关问题