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

Question

我有一个 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');
});

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

这里有一个适合懒 child 的jsfiddle: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

注意:调试时更喜欢控制台日志记录而不是警报