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

Question

我被这个问题困扰了好几个小时。我需要创建一个表单的一部分，如果你点击一个选择，一个复选框字段应该弹出，如果你再次点击其他任何地方，这个字段应该消失。我想在单击选择后通过聚焦字段来执行此操作，但由于某种原因，我的复选框字段不仅会在您单击其他任何地方时失去焦点，甚至当您单击复选框 INSIDE 的标签时也会失去焦点其中。所以问题是我正在关注一个元素，我在其中单击标签，并且由于某种我无法弄清楚的原因，聚焦的父元素失去了焦点。

代码：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

Answer 2

好的，两个简单的更改使这个工作首先将选择框上的单击侦听更改为mousedown 侦听器，就像这样。

 $('.multiselector').mousedown(function(event) {
        event.preventDefault();
        currentMulti = $(this).attr('id');
        thisOffset = $(this).offset();
        $(this).hide();
        $('#' + currentMulti + '-container')
            .css('top', thisOffset.top + 'px').show().attr("tabindex", -1).focus();
        $(this).addClass('active');
    });

这会在盒子出现之前触发，因此它永远不会显示。

其次，当孩子获得焦点以修复此更改为 focusout 时，模糊侦听器认为它失去了焦点。

 $('.multiselect.container').focusout(function() {
        multiSelectUpdate();
    });

这仅在选择器失去焦点时触发，即使当前焦点在选择器的子级上。

固定fiddle

享受:)

编辑

由于某种原因，模糊会在 FF 上多次触发，因此要解决此使用问题，而不是使用模糊鼠标离开。

$('.multiselect.container').mouseleave(function() {
        multiSelectUpdate();
    });