javascript-events - jQuery - 聚焦/模糊显示/隐藏输入组

Question

我有一个带有 2 组 3 个输入的小表格。

每组只有一个输入可见。

如果我关注一个输入，则会显示同一组中的所有内容。

如果没有关注该组的输入，则应该只出现第一个。

$('input').focus(function () {
    $(this).closest('div').addClass('focused');
}).blur(function () {
    $(this).closest('div').removeClass('focused');
})

这适用于 Chrome，但不适用于 Firefox（请查看我的小提琴）。
在获得焦点之前，右侧的两个输入都被隐藏。
似乎两个浏览器上的事件冒泡顺序不同。

有人可以帮我使它适用于所有浏览器吗？

Answer 1

您可以添加一点延迟来防止这种情况。

$('input').focus(function () {
    var $parent = $(this).closest('div');
    var timeoutId = $parent.data('tid');

    if (timeoutId) {
        // Aborting the blur
        clearTimeout(timeoutId);
    }

    $parent.addClass('focused');
}).blur(function () {
    var $parent = $(this).closest('div');

    var tid = setTimeout(function(){
        $parent.removeClass('focused');
    }, 1);

    $parent.data('tid', tid);
})

http://jsfiddle.net/b439u/5/