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

Question

我需要创建一个表单的部分，当您点击选择时，应该弹出复选框字段，如果您再次单击其他任何地方，此字段应消失。我想通过在单击选择后聚焦字段来实现此目的，但由于某种原因，我的复选框字段不仅在您单击它之外的任何地方时失去其焦点，甚至在单击其中一个复选框标签时也会失去其焦点。因此，问题在于我正在聚焦一个元素，在其中单击标签并且聚焦的父元素因某种原因失去了它的焦点，我无法找到原因。

代码：http://jsfiddle.net/RELuL/2/ 希望能得到任何帮助！

附加问题：如您所见，如果您单击选择输入，我的隐藏复选框部分显示有点晚，它不会立即显示，这看起来有点糟糕。有什么提示可以优化此功能吗？

编辑：我使用Firefox 13.0.1

- skywlkr

---

这个表单是选择框还是复选框，为什么要更改它？ - jasssonpet

这是一个选择框，但如果单击它，它必须弹出复选框。这是我必须完成的任务，我不同意这种方法，但必须按照这种方式完成。 - skywlkr

愚蠢的问题 - 为什么你不直接使用一个简单的多选框或者直接使用那些复选框呢？不要把它搞得比必要的还要复杂。 - Christoph

正如我在上一条评论中所说：“这是我必须完成的任务，虽然我不同意这种方法，但必须按照这种方式进行。” - skywlkr

@skywlkr问题已回答并且还有奖金 :) - AbstractChaos

对于奖励问题，绑定mousedown事件到你的下拉菜单上，而不是click事件。这样可以防止下拉菜单的打开，从而提供更好的用户体验。 - Robert Koritnik

Answer 1

当您单击<label>时，浏览器会将焦点放在相关的输入字段上。所以焦点离开父元素并转到复选框（调用您的模糊事件处理程序）。

与其将焦点集中在父div上并依赖于模糊操作，不如将单击处理程序附加到文档：

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

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

此外，在Webkit中，点击不会触发点击事件。解决方法是改用焦点事件。演示： Demo

- Jeffery To

---

这是目前为止最好的解决方案，但我已经进行了升级，以便在打开选择框后仅绑定文档的点击监听器，并在关闭选择框后从文档中解除点击监听器，因此它不会在我单击页面上的任何位置时运行multiSelectUpdate()函数。谢谢，赏金奖励即将到来！ - skywlkr

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 上的模糊事件会多次触发，因此为了解决这个问题，请使用 mouseleave 代替 blur。

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

- AbstractChaos

---

我想接受您的答案，但是正如您所看到的，您的解决方案并不完美，因为如果我点击框框外部，容器不会失去焦点，focusout事件也不会被触发。 - skywlkr

@skywlkr，现在试试看，似乎我还没有更新，它可以触发，只是那个 fiddle 没有实现 focusout。 - AbstractChaos

是的，现在它失去了焦点，但在Firefox上，如果我点击标签，它仍然会失去焦点。你在测试什么？因为在Chrome上，它可以工作，但它也必须在FFox上工作。 - skywlkr

@skywlkr 我在 Chrome 中测试过了，但在 Firefox 中，当你点击一个子元素并触发事件时会模糊。解决方法在编辑中 :) - AbstractChaos

我非常感谢您在这个解决方案上所花费的时间和工作，但是我必须接受Jeffrey To的答案，因为它最接近我想要实现的东西。Mouseleaving不是我想要触发函数的事件 :/ 我希望我也能给您一些赏金点，但我没有 :P 但再次感谢您，祝您有愉快的一天！ - skywlkr