javascript - 为什么 onKeyDown 和 onKeyUp 在附加到 contenteditable div 中的跨度时不触发？

Question

这是演示问题的代码片段:

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')
);

关注 div 并按下一些按钮后，不会触发警报。为什么？

https://codesandbox.io/embed/react-playground-forked-fymxg3?fontsize=14&hidenavigation=1&theme=dark

Answer 1

contenteditable的内容元素被视为用户输入，而不是 DOM 的一部分。与 <input> 中的文本相同元素。

因此，您不能像与普通 DOM 一样与该元素的值进行交互 - 这意味着这里没有适合您的事件处理程序。