父容器上的jquery catch blur事件

Question

这是我的问题：

我创建了一个窗体小部件，它显示了一个包含多个元素（文本框）的div。 当在容器外面点击时，它应该消失 - 我已经知道了。 现在的问题是：当点击INSIDE容器时，例如。为了选择不同的文本框，容器也将消失。 我怎么能阻止这个？

我目前的代码是：

showFormbutton.click(function() {
    showForm();
    $(document).one('click', function() { hideForm(); });
    return false;
});

欢呼声

Answer 1

事件冒泡到document。你可以这样看：点击容器也点击文档，因为容器是文档的一部分。因此，当您在容器内部单击时，也会执行document的单击处理程序。

您可以通过调用容器内的e.stopPropagation来阻止这种情况发生。

这样，点击容器外部文档中的某个位置将冒泡到document的点击处理程序，但点击容器将不会因为容器的click事件会阻止它。

http://jsfiddle.net/6jRQZ/

$("#container").click(function(e) {
    e.stopPropagation();
});

此外，您可以将function() { hideForm(); }替换为hideForm - 您只需传递该功能;不需要额外的匿名功能。