javascript - 如何模糊可编辑内容中的表格单元格

Question

我在内容可编辑的 div 中有一个简单的表格，如下所示:

<div contenteditable="true">
    <table class="rwd-table" width="100%">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</div>

当您单击某个单元格时，我将使用 jQuery 向该单元格添加 ID。 ID 应用了 CSS 来突出显示它。

$(document).on('click', 'td, th', function (event) {
    // remove previous highlighted cell
    $('#selectedCell').removeAttr('id');
    // highlight new cell
    $(this).attr('id', 'selectedCell');
});

当突出显示的单元格失去焦点时，应删除 ID。这是我的问题。

// DOES NOT WORK  :(   //
$(document).on('blur', '#selectedCell', function (event) {
    $('#selectedCell').removeAttr('id');
});

我假设这是因为表格单元格通常没有焦点/模糊事件。

有没有办法检测 contenteditable 中表格单元格的模糊？

这是一个实例:http://jsfiddle.net/5c7br6zc/

Answer 1

是的，模糊事件的问题。不要依赖它，而是尝试在 document 上绑定(bind)点击事件，并防止它在 TD 上发生点击时冒泡:

$(document).on('click', 'td, th', function (event) {
    $('#selectedCell').removeAttr('id');
    $(this).attr('id', 'selectedCell');
    event.stopPropagation();
});

$(document).on('click', function (event) {
    $('#selectedCell').removeAttr('id');
});

演示: http://jsfiddle.net/5c7br6zc/1/