我需要创建一个表单的一部分,如果你点击一个选择,一个复选框字段应该弹出,如果你再次点击其他任何地方,这个字段应该消失。我想通过单击选择后聚焦字段来做到这一点,但由于某种原因,我的复选框字段不仅在您单击其他任何地方时失去焦点,而且即使您单击内部复选框的标签时也是如此它的。所以问题是我正在关注一个元素,我在其中单击标签并且由于某种我无法弄清楚的原因,聚焦的父元素失去了焦点。
代码:http://jsfiddle.net/RELuL/2/
感谢任何帮助!
附言:
只是一些额外的问题 :) 如您所见,如果您单击选择输入,我隐藏的复选框部分显示得有点晚,它不会立即显示,这看起来有点糟糕。有什么优化技巧吗?
编辑:我使用 Firefox 13.0.1
最佳答案
当你点击 <label>
,浏览器聚焦相关的输入字段。因此焦点离开父项并转到复选框(并且调用了您的模糊事件处理程序)。
不是聚焦父 div 并依赖它被模糊,而是将点击处理程序附加到文档:
$(document).click(function() {
multiSelectUpdate();
});
$('.multiselect.container').click(function(event) {
event.stopPropagation(); // prevent click event from reaching document
});
另外,在 Webkit 中点击 <select>
不会触发点击事件。解决方法是改用焦点事件。
关于javascript - 如果单击焦点元素的子元素,则会在焦点父元素上触发 Blur 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11153804/