Javascript 如何获取正在编辑的元素？

我正在开发一个webapp，我对JavaScript有一个问题

下面是导致问题的HTML的简化版本。我有一些嵌套的contenteditable div我用占位符文本替换了真实的内容：

<div contenteditable="true" id="div1">
    text
    <div contenteditable="inherit" id="div2">
        text
        <div contenteditable="inherit" id="div3">
            text
        </div>
        text
    </div>
    text
</div>

我想让用户通过JavaScript编辑选中的元素，但到目前为止，我还没有找到成功的方法

我尝试了什么以及为什么不起作用：

我已经尝试使用document.activeElement，它应该返回焦点中的任何元素。通常情况下，这是可行的，但在使用嵌套的contenteditable元素时，它不会产生所需的结果。它不返回用户正在编辑的元素，而是返回最上面的contenteditable祖先

例如，如果选择/编辑了div2，document.activeElement将返回div1。如果选择/编辑了div3，document.activeElement也会返回div1

所以我想document.activeElement不是解决这个问题的正确方法

---

如何获得正在编辑的最具体的元素，而不是其最主要的内容可编辑的祖先？

在这个问题上对我来说似乎很好：

我正在使用此代码检查：

<div contenteditable="true" class="edit">
    This is editable.
</div>

<script>
    $('.edit').on('click', function(){
        console.log(document.activeElement);
    });
</script>

当我点击可编辑元素时，console将获得一份记录到其中的div副本。

$“编辑”。单击“编辑”功能{ //这是最里面的*节点* var an=window.getSelection.anchorNode； //这是最里面的*元素* var ae=an； while！ae元素实例 ae=ae.parentElement； $'an'.textan.nodeValue； $'ae'.textae.outerHTML； }; 这是可编辑的。什么这个怎么样？ 活动节点： 没有什么 主动元件： 没有什么

---

我是通过在插入符号位置插入一个虚拟元素并找到它的直接父元素来实现的

function getActiveDiv() {
    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var node = document.createElement('span');
    range.insertNode(node);
    range = range.cloneRange();
    range.selectNodeContents(node);
    range.collapse(false);
    sel.removeAllRanges();
    sel.addRange(range);
    var activeDiv = node.parentNode;
    node.parentNode.removeChild(node);
    return activeDiv;
}

我在小提琴上做了一个例子：

我在绑定到相关div的每个按键事件上运行它

---

我基于另一个做了类似事情的线程：

这为我完成了任务：

   $(document).click(function(event) {
            console.log(event.target);
        });

---

你所说的“聚焦”到底是什么意思？这个问题并不是一个“为什么代码不起作用”的问题。在我第一次尝试失败后，更多的是询问如何做一些事情。真正最好的方法是制作一个变种观察者。这并不容易though@Dimava不过，突变观察者不会拾取纯粹的交互事件。只有突变。你可以提供一个答案作为例子，如果你愿意，我也可以为什么这个问题被否决了？在嵌套的contenteditable上获得焦点元素是非常困难的。它必须这样才能工作吗？我的div是contenteditable inherit，我的父div是contenteditable。是。您正在编辑整个contenteditable父元素，而不仅仅是子元素，因此它将成为焦点。那么答案并不能解决我的问题。如何获得焦点/正在编辑的最具体的元素？@Dimava添加了一些示例，以显示输入与keydown和keyup之间的差异。。。我跳过了按键操作，因为这是多余的，但你明白了@narawagames您将此标记为答案，然后取消标记？为什么？不，他想要的是被编辑的元素，而不是被点击的元素。对我来说非常适合！