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。 "

没有 dasfdsa。用户没有输入span. 用户正在输入div.

这是 span

这是 div

还要注意contenteditable="true"代码中的 ，它设置为 div，而不是span. 这就是为什么event.target.nodeName显示div而不是span。

将 设置contenteditable="true"为span应该可以完成您的工作，如下所示

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

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

});

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

<div id=wrapper>

  hello 

  <span contenteditable="true" > world!</span>

</div>

编辑：似乎打字确实发生在 中span，感谢 Kaiido 提供此信息。但是event.target返回父元素（我实际上不知道为什么）。

Answer 2

获取此元素的一种方法是检查当前范围commonAncestorContainer是什么。

这将返回您的光标当前所在的节点（以及您正在输入的位置）。要获得最接近的元素，您可以简单地检查此节点的 nodeType，parentElement如果它不是 Element ，则返回它。

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

  console.log("currently typing in ->", getFocusedElement() ); 

});

function getFocusedElement() {

  const node = getSelection().getRangeAt(0).commonAncestorContainer;

  return node.nodeType === 1 ? node : node.parentElement;  

}

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

<div contenteditable="true" id=wrapper>

  hello 

  <span> world!</span>

</div>

Answer 3

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