javascript - 当事件附加到文档时,获取 elem 的 id
问题描述
需要注意的点:
- 整个文件是
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>
解决方案
一个问题是 - 如果整个正文是可编辑的,那么当您的用户开始编辑时,您如何知道哪些元素将保留,或者完全删除,甚至添加?
您是否可以将每个不同的元素单独标记为可编辑?根据下面的片段。
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>
当然,也可以使用循环将每个元素设置为可编辑,以不重复代码并自动适应不同的文档结构。
推荐阅读
- unit-testing - MockK 捕获暂停 lambda / 协程
- c# - C# 从 HTTP POST 请求中获取答案
- java - 用于枚举反序列化的 OpenApi 生成器不区分大小写配置
- jquery - 如何在 PersianDatePicker 中设置初始值?
- javascript - JavaScript:正则表达式
- python - 如何在 if 条件下更快地进行 for 循环
- python - 检查 list in 列表中所有元素的类型以及它们的数值是否在一个范围内
- .net - 如何使用 dapper 将多个左外连接映射到继承的对象?
- javascript - Angular Ngrx:从 Java API 获取和显示选项列表
- python - Django - 从许多表中创建提案