Question

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

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

任何帮助表示赞赏！

P.S：

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

编辑：我使用的是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(); });

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

2 个答案: