javascript - 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 返回父元素(我实际上不知道为什么)。