Javascript 如何检测contenteditable DIV的子元素何时通过键盘进行编辑？

给定此HTML代码：

<div contenteditable>
    ....
    <span> child-element </span>
    ....
</div>

div{边框：2px纯红色；填充：10px；边距：10px；}
span{背景色：黄色；}

之前
跨度
之后

单击黄色SPAN元素（将插入符号放在其中），然后按字符键（更改SPAN元素的文本内容）。警报框显示事件目标是DIV元素，而不是SPAN元素。。。

这可以使用选择API完成：

$('div').keydown(function(e) {
    if (document.selection) {
        alert(document.selection.createRange().parentElement().tagName); // IE
    } else {
        // everyone else
        alert(window.getSelection().anchorNode.parentNode.tagName); 
    }
});

注意：上述示例过于简单。有关选择问题的完整解决方案，请参阅下面链接的SO帖子

演示（也包括）：

$（'div'）。向下键（函数（e）{
if（文档选择）
警报（document.selection.createRange（）.parentElement（）.tagName）；//IE
其他的
警报（window.getSelection（）.anchorNode.parentNode.tagName）；//其他所有人
});
div{边框：2px纯红色；填充：10px；边距：10px；}
span{背景色：黄色；}

之前
跨度
之后

单击黄色SPAN元素（将插入符号放在其中），然后按字符键（更改SPAN元素的文本内容）。警报框显示事件目标是DIV元素，而不是SPAN元素。。。

使整个
div
可编辑意味着
标记只不过是文本内容。如果您只想让
span
可编辑，请在span本身上设置
contentEditable
。
我需要整个DIV可编辑。我使用SPAN元素来给出特定单词的样式和行为……这是不正确的。子元素仍然存在，并且仍然可以访问和操作。示例：@Šime-使用IE解决方案更新。我在研究这篇文章时发现了这篇链接文章。这里有更完整的答案。有一点：
anchorNode
不能保证在所有浏览器和所有情况下都是文本节点。最好检查它的节点类型，看看它是否是一个安全的元素。@Tim-是的，绝对是。任何使用我的答案的人都需要阅读另一个相关的SO问题，这将涉及到细节。我说这不是重复的唯一原因是因为它是在
contenteditable
的上下文中。@Tim-顺便说一句，很高兴你加强了这一点。我在野外看到的大多数范围代码都假定开始和结束节点始终是文本节点，即使规范明确指出它们不是文本节点。