如何模糊内容 editable 中的 table 单元格

Question

我在内容编辑器中有一个简单的 table table 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');
});

我假设这是因为 table 细胞通常没有 focus/blur 事件。

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

这是一个活生生的例子：http://jsfiddle.net/5c7br6zc/

Answer 1

是的，模糊事件的问题。不要依赖它，而是尝试在 document 上绑定点击事件并防止它冒泡，以防点击发生在 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/

如何模糊内容 editable 中的 table 单元格

How to blur a table cell within content editable

javascript

jquery

focus

blur

contenteditable