Question

要点：

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

例如：如果我将Tom更改为Paul，我应该m1作为ID。

问题：e.target返回 body 元素，而不是 specificc 元素（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

问题是 - 如果整个身体是可编辑的，那么当您的用户开始编辑时，您如何知道哪些元素将保留，或者完全删除，甚至添加？

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

将事件附加到文档

2 个答案: