keydown event.target 不正确

Question

在下面的代码片段中，我的目标是记录用户正在输入的元素。但是当用户输入时span，事件目标仍然是div。

document.getElementById("wrapper").addEventListener('keydown', (event)=>{

  console.log("event.target.nodeName -> ", event.target.nodeName);

});

<i>Type in "world" below</i>

<div contenteditable="true" id=wrapper>

  hello 

  <span> world!</span>

</div>

Answer 1

"但是当用户在 span 中输入时，事件目标仍然是 div。&nbsp;"没有 dasfdsa。用户没有输入span.&nbsp;用户正在输入div.这是&nbsp;span这是&nbsp;div还要注意contenteditable="true"代码中的 ，它设置为 div，而不是span. 这就是为什么event.target.nodeName显示div而不是span。将 设置contenteditable="true"为span应该可以完成您的工作，如下所示document.getElementById("wrapper").addEventListener('keydown', (event)=>{&nbsp; console.log("event.target.nodeName -> ", event.target.nodeName);});<i>Type in "world" below</i><div id=wrapper>&nbsp; hello&nbsp;&nbsp; <span contenteditable="true" > world!</span></div>编辑：似乎打字确实发生在 中span，感谢 Kaiido 提供此信息。但是event.target返回父元素（我实际上不知道为什么）。

Answer 2

获取此元素的一种方法是检查当前范围commonAncestorContainer是什么。这将返回您的光标当前所在的节点（以及您正在输入的位置）。要获得最接近的元素，您可以简单地检查此节点的 nodeType，parentElement如果它不是 Element ，则返回它。document.getElementById("wrapper").addEventListener('input', (event)=>{&nbsp; console.log("currently typing in ->", getFocusedElement() );&nbsp;});function getFocusedElement() {&nbsp; const node = getSelection().getRangeAt(0).commonAncestorContainer;&nbsp; return node.nodeType === 1 ? node : node.parentElement;&nbsp;&nbsp;}<i>Type in "world" below</i><div contenteditable="true" id=wrapper>&nbsp; hello&nbsp;&nbsp; <span> world!</span></div>

Answer 3

跨度在 div 内，事件将从子级 - 跨度传播到 div 上的处理程序。要访问处理程序的元素，请使用event.currentTargetVs&nbsp;event.target，它是触发事件的元素。