Question

我有一个blur事件附加到容器（在本例中为表格单元格），其中包含一个或更多可点击项目（例如输入字段和按钮）。

我的单元格嵌入形式可能会发生两件事。如果某个输入字段中的值发生更改，则会处理该表单。如果某个值未更改，但焦点丢失，则表单将被清除。

如果用户点击了单元格中的其他项目，我不希望单元格为blur。

这是我尝试过的事情 - 检查blur事件中焦点儿童的数量。

HTML

<table>
    <tr>
        <td id="edit">
            <input type="text"></input>
            <input type="checkbox"></input>
            <button>Test</button>
        </td>
    </tr>
</table>

的JavaScript

$('table').on('change', '#edit input', function () {
    alert('An input field has changed');
});

$('table').on('blur', '#edit', function () {>
    if ($(this).children(':focus').length == 0) {
        alert('The user has clicked away from the form');
    } else {
        alert('The user hasn\'t finish editing yet');
    }
});

但不幸的是，焦点儿童的长度总是报告为0！

然后我试了

$('body').not('#edit, #edit > *').on('focus', function () {
    alert('The user has clicked something else');
});

但这根本不起作用！我也很怀疑它，因为我需要在change处理程序之前触发focus处理程序，因此如果用户进行了更改，表单不会被取消。

这是一个适合懒惰孩子的傻瓜：http://jsfiddle.net/QmVsr/

Answer 1

可能的解决方案是使用基于计时器的方法

$('table').on('blur', '#edit', function () {
    var timer = setTimeout(function(){
        console.log('The user has clicked away from the form');
    }, 20);
    $(this).closest('td').data('blurTimer', timer)
}).on('focus', '#edit', function () {
    clearTimeout($(this).closest('td').data('blurTimer'))
});

演示：Fiddle

注意：虽然调试更喜欢控制台日志记录而不是警报

如果新的焦点元素不是孩子，则jQuery模糊

HTML

的JavaScript

1 个答案: