如何模糊中的内容编辑

Question

我有一个内容编辑专区内一个简单的表像这样一个表格单元格：

<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结合并阻止它的情况下，如果起泡发生在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/