如何在内容可编辑的 div 内的嵌套跨度上触发事件？答案

【问题标题】：How can I trigger an event on a nested span inside a content-editable div?如何在内容可编辑的 div 内的嵌套跨度上触发事件？
【发布时间】：2021-06-08 00:33:00
【问题描述】：

我有一个内容可编辑的 <div> 和动态添加的 <span> 元素，当用户通过单击它或使用键盘或者如果里面的文字被改变了。

我已经在使用点击事件，但我无法弄清楚如何处理键盘部分。有什么建议或想法吗？

我尝试过使用“焦点”和“更改”事件，但它们并没有成功。我还应该提到父元素附加了其他事件侦听器，所以我不确定这是否会导致问题。

<div contenteditable="true" id="compose-box">this is some text <span class="myClass" data-index="1">special text</span>&nbsp; more text</div>
    
this.textbox = document.getElementById("compose-box");

this.textbox.addEventListener("click", (e) => {
      if (e.target && e.target.classList.contains("myClass")) {
        this.updateText(e); //Function I need to call
      }
});

【问题讨论】：

你考虑过mutationObserver吗？
感谢@RandyCasburn。我以前没有使用过 mutationObserver API，但听起来它可能适合我的目的。我可以将它用于类而不是元素的 ID 吗？这将允许我检查任何这些跨度元素的变化。
当然 - 检查这个接近你想要实现的例子。它监视一个节点，它是整个树的添加和删除。 developer.mozilla.org/en-US/docs/Web/API/MutationObserver/…

标签： javascript dom events dom-events

【解决方案1】：

我想出了一种使用 Selection 对象的方法。我创建了一个新变量来获取插入符号在内容可编辑 div 中的位置，并使用它来检查 anchorNode 属性是否包含我的目标类。

const sel = window.getSelection();
this.textbox.addEventListener("keydown", (e) => {
      if(sel["anchorNode"] && sel["anchorNode"].parentNode.classList.contains("myClass")
      ) {
        // call method
      }
    });

【讨论】：