为何contenteditable div内span的onKeyDown/onKeyUp事件不触发？

聚焦设置了contentEditable="true"的div容器后按下键盘按键，嵌套在div内部的span元素上绑定的onKeyDown事件回调不会触发，复现代码如下：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render() {
    return (
     <div contentEditable="true">
       <p>
         <span onKeyDown={(e)=>{
           alert("hello world!!")
          }}>Hello world</span>
       </p>
     </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

这个现象是DOM原生特性和React事件机制共同导致的，核心原因有三点：

• 键盘事件的触发前提是元素聚焦：键盘事件只会派发给当前持有焦点的元素。示例中点击可编辑区域后，实际获得焦点的是设置了contentEditable="true"的外层div；内部的span既没有单独设置contentEditable属性，也没有配置tabindex，本身属于不可聚焦元素，自始至终不会持有焦点，不可能成为键盘事件的直接触发源。
• contentEditable容器的事件目标固定为可编辑根节点：浏览器处理可编辑区域的输入行为时，无论光标视觉上停留在内部的哪个子节点位置，所有键盘事件的event.target都会指向设置了contentEditable的根元素（也就是示例中的外层div），不会指向内部嵌套的普通子元素。
• React合成事件的委托机制无法匹配到子元素回调：示例使用的是React 18之前的老版本渲染API，这类版本的所有合成事件（包括onKeyDown）都会统一委托在document根节点监听。事件冒泡到document后，React会根据事件源的真实DOM，反向匹配虚拟DOM树上对应节点绑定的回调。既然事件源从始至终都是外层div，React的事件匹配逻辑不会遍历到内部的span节点，写在span上的回调自然永远不会被调用。

不要直接给contentEditable容器的内部普通子元素绑定键盘事件，这类事件永远不会按预期触发，正确处理逻辑：

• 把onKeyDown事件绑定在持有contentEditable="true"属性的根容器上
• 回调触发时，通过window.getSelection()接口获取当前光标所处的DOM节点
• 判断光标节点是否位于目标span的DOM子树内，符合条件再执行对应业务逻辑

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