jQuery技术问题：箭头键移入contenteditable span时无法触发focus事件

我完全懂你的困扰！之前做富文本编辑器的时候也踩过这个坑——通过点击能触发子元素的focus事件，但用箭头键把光标移进去就没反应，本质原因是：当你在父级contenteditable容器内用键盘导航时，浏览器的焦点其实一直停留在父容器上，并不会把焦点转移到内部的子contenteditable元素上，自然就不会触发子元素的focus事件。

那怎么解决呢？我们可以监听全局的selectionchange事件，通过判断当前光标（选区）的位置是否落在目标span内部，来模拟触发我们需要的逻辑。

改造后的代码示例 #

<div contenteditable=true> aa <span contenteditable=true style="border: solid thin #000">bb</span> aa </div>
<script type="text/javascript">
  const targetSpan = document.getElementsByTagName('span')[0];
  let isInSpan = false; // 标记是否已经触发过逻辑，避免重复执行

  document.addEventListener('selectionchange', () => {
    const selection = window.getSelection();
    if (!selection.rangeCount) return;

    const range = selection.getRangeAt(0);
    // 判断选区的起始节点是否在目标span内部
    const currentNode = range.startContainer;
    const isInsideSpan = targetSpan.contains(currentNode);

    if (isInsideSpan && !isInSpan) {
      isInSpan = true;
      alert('focused'); // 这里替换成你需要的focus触发逻辑
    } else if (!isInsideSpan && isInSpan) {
      isInSpan = false; // 光标移出时重置标记
    }
  });

  // 兼容点击的情况（可选，因为selectionchange也会覆盖点击场景）
  targetSpan.addEventListener('click', () => {
    if (!isInSpan) {
      isInSpan = true;
      alert('focused');
    }
  });
</script>

代码逻辑说明 #

1. 监听selectionchange事件：这个事件会在用户改变文本选区（包括移动光标）时触发，完美覆盖键盘导航的场景。
2. 判断光标位置：通过window.getSelection()获取当前选区，然后用contains()方法检查光标所在的节点是否属于目标span。
3. 加入状态标记：避免光标在span内部移动时重复触发alert（或者你的业务逻辑），只有当光标从外部移入时才执行一次。

这种方法不仅能解决箭头键导航的问题，还能兼容点击、鼠标选中等所有光标进入span的场景，比单纯依赖focus事件更可靠。

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