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

Posted 2023-02-22

【中文标题】如何在内容可编辑的 div 内的嵌套跨度上触发事件？

【英文标题】：How can I trigger an event on a nested span inside a content-editable 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/…

【参考方案1】：

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

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