获取将事件附加到文档时更改的 elem 的 id

Question

注意事项：

• 整个文档content editable
• 身体附有input event
• 我需要获取已更改的特定元素的id
• 只允许使用原版Javascript

例如：如果我Tom更改为Paul，我应该m1为id。

问题：e.target返回正文元素而不是指定元素(div#m1(

document.body.contentEditable = true;
document.body.addEventListener('input', e => {
console.log(e.target)
})

<div id="m1">Hello Tom</div>
<div id="m2">Hello Sam</div>

Answer 1

一个问题是 - 如果整个主体都是可编辑的，你怎么知道当你的用户开始编辑时，哪些元素会保留，或者被完全删除，甚至添加？

是否可以将每个不同的元素单独标记为可编辑？根据下面的代码片段。

document.getElementById('m1').contentEditable = true;
document.getElementById('m2').contentEditable = true;
document.body.addEventListener('input', e => {
console.log(e.target)
})

<div id="m1">Hello Tom</div>
<div id="m2">Hello Sam</div>

当然，也可以使用循环设置每个元素可编辑，不重复代码并自动适应不同的文档结构。

Answer 2

我已经在您的控制台中添加了e.target.id。希望这对你有用

document.body.contentEditable = true;
document.body.addEventListener('input', e => {
console.log(e.target.id);
})

<div id="m1">Hello Tom</div>
<div id="m2">Hello Sam</div>