2

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

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

任何帮助表示赞赏！

PS：

只是一些额外的问题:) 正如你所看到的，如果你点击选择输入，我隐藏的复选框部分显示得有点晚，它没有立即显示，看起来有点糟糕。任何提示如何优化这个？

编辑：我使用 Firefox 13.0.1

4

2 回答 2

4

当您单击 a<label>时，浏览器会聚焦关联的输入字段。因此焦点离开父级并转到复选框（并调用您的模糊事件处理程序）。

与其关注父 div 并依赖它被模糊，不如将点击处理程序附加到文档：

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

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

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

演示

于 2012-06-26T03:43:46.457 回答
0

好的，两个简单的更改使此工作首先将选择框上的单击侦听更改为像这样的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();
    });

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

固定小提琴

请享用 ：）

编辑

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

$('.multiselect.container').mouseleave(function() {
        multiSelectUpdate();
    });
于 2012-06-25T12:22:37.840 回答