javascript - 如果单击焦点元素的子元素，则会在焦点父元素上触发 Blur 事件

Question

我需要创建一个表单的一部分，如果你点击一个选择，一个复选框字段应该弹出，如果你再次点击其他任何地方，这个字段应该消失。我想通过单击选择后聚焦字段来做到这一点，但由于某种原因，我的复选框字段不仅在您单击其他任何地方时失去焦点，而且即使您单击内部复选框的标签时也是如此它的。所以问题是我正在关注一个元素，我在其中单击标签并且由于某种我无法弄清楚的原因，聚焦的父元素失去了焦点。

代码:http://jsfiddle.net/RELuL/2/

感谢任何帮助!

附言:

只是一些额外的问题 :) 如您所见，如果您单击选择输入，我隐藏的复选框部分显示得有点晚，它不会立即显示，这看起来有点糟糕。有什么优化技巧吗？

编辑:我使用 Firefox 13.0.1

Answer 1

当你点击 <label> ，浏览器聚焦相关的输入字段。因此焦点离开父项并转到复选框(并且调用了您的模糊事件处理程序)。

不是聚焦父 div 并依赖它被模糊，而是将点击处理程序附加到文档:

$(document).click(function() {
    multiSelectUpdate();
});

$('.multiselect.container').click(function(event) {
    event.stopPropagation(); // prevent click event from reaching document
});

另外，在 Webkit 中点击 <select>不会触发点击事件。解决方法是改用焦点事件。

Demo