1

我有一个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处理程序，这样如果用户进行了更改，表单就不会被取消。

这是给你懒惰的孩子的 jsfiddle：http: //jsfiddle.net/QmVsr/

4

1 回答 1

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'))
});

演示：小提琴

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

于 2013-08-30T16:13:19.083 回答