如何为contenteditable可编辑div内的嵌套span绑定多场景触发事件？

你之前尝试用focus、change事件达不到预期，根本是这两个事件的触发规则和当前的DOM场景完全不匹配：

• focus属于原生聚焦事件，仅会在带tabindex属性的元素、表单控件、可交互链接上触发。普通span即使放在contenteditable容器里，本身也不满足原生聚焦条件，单独给span绑focus事件永远不会被触发
• change是表单专属事件，只针对input、textarea、select这类原生表单控件生效，contenteditable容器及内部的普通DOM元素压根不会触发这个事件

至于你担心父元素已经绑定的其他监听器会产生冲突，这个可以完全放心：同一个DOM元素上的多组事件监听器是独立并行执行的，只要不主动调用stopPropagation或stopImmediatePropagation阻断事件传播，所有监听逻辑完全互不干扰。

所有和span的交互事件最终都会冒泡到父级#compose-box容器，直接在父容器上做事件委托就能覆盖所有场景，哪怕内部是动态新增的span也不需要单独绑定事件。

通用判断逻辑 #

封装一个可复用的判断方法，通过浏览器原生Selection API 获取当前光标/选区所在的DOM位置，就近匹配带myClass类的span，所有触发场景都可以复用这个判断，不用重复写逻辑：

const getTargetMyClassSpan = () => {
  const selection = window.getSelection();
  if (!selection.rangeCount) return null;
  const currentRange = selection.getRangeAt(0);
  // 兼容光标落在纯文本节点上的情况
  const currentNode = currentRange.startContainer;
  const currentEl = currentNode.nodeType === Node.TEXT_NODE 
    ? currentNode.parentElement 
    : currentNode;
  // 向上就近匹配目标span，兼容span内部嵌套子元素、文本的场景
  return currentEl.closest('span.myClass');
}

完整事件绑定 #

在你已有的click监听基础上，补两组事件监听即可覆盖键盘聚焦、文本变更的所有需求，所有监听均挂在父容器上，和现有逻辑完全兼容：

this.textbox = document.getElementById("compose-box");

// 原有click逻辑可复用公共判断方法简化
this.textbox.addEventListener("click", (e) => {
  const targetSpan = getTargetMyClassSpan();
  if (targetSpan) {
    // 透传原有事件参数，保持updateText函数的入参格式不变
    this.updateText({...e, target: targetSpan});
  }
});

// 新增：覆盖键盘方向键移动光标、按键操作聚焦到span的场景
this.textbox.addEventListener("keyup", (e) => {
  const targetSpan = getTargetMyClassSpan();
  if (targetSpan) {
    this.updateText({...e, target: targetSpan});
  }
});

// 新增：覆盖span内部文本变更（键盘输入、删除、粘贴、拖拽改文本）的场景
this.textbox.addEventListener("input", (e) => {
  const targetSpan = getTargetMyClassSpan();
  if (targetSpan) {
    this.updateText({...e, target: targetSpan});
  }
});

• 不需要给普通span额外添加tabindex属性，也不需要针对动态新增的span单独绑定事件，事件委托机制会自动识别后续插入的所有目标span
• 所有逻辑不会阻断事件冒泡，父元素上已有的其他监听器可以正常执行，不存在互相干扰的问题
• 用closest()做就近匹配，哪怕span内部包含嵌套子元素、纯文本节点，都能准确识别归属，不会出现漏判、误判

内容的提问来源于stack exchange，提问作者jansyb04