Java 脚本 - cloneNode(true)，克隆太多项目
我会进入正题
我在尝试什么？： 我尝试克隆项目，以便每个项目在单击时都会克隆自身。即使是那些被克隆的。
问题： 问题是，当我克隆了 10 个项目时，单击第一个（原始）项目后，它会克隆接下来的 10 个项目。无论我已经拥有多少个元素，只有最后一个（最新的）克隆会克隆一个元素。
信息： 如果“克隆”函数末尾没有 app()，则只有原始元素添加更多克隆。
这是 clondeNode() 的问题还是可能是错误的未对齐的 addEventListener 问题？
感谢您提前提供的帮助，马特
JS：
app = () => {
const divs = document.querySelectorAll('.div');
divs.forEach((div) => {
div.addEventListener('click', () => clone(event))
})
}
clone = (event) => {
const div = event.target;
const clone = div.cloneNode(true);
document.body.appendChild(clone)
app()
}
app()
HTML：
<body>
<div class='div'>DIV FOR CLONING</div>
<script src="main.js"></script>
</body>
一只甜甜圈浏览 126回答 2
2回答
-
慕哥9229398
单击后调用时app()，您可以向所有现有元素添加一个新的事件侦听器，这是对它们已附加的处理程序的补充。无需app在那里调用，只需将侦听器添加到新创建的克隆即可。其次，函数和变量使用相同的名称。这很令人困惑。因此以不同的方式命名该变量：const clonedDiv = div.cloneNode(true); document.body.appendChild(clonedDiv); clonedDiv.addEventListener('click', clone);如您所见，您也不需要该箭头函数。clone只需作为函数参数传递即可。 -
幕布斯6054654
在克隆函数中，您再次调用 app()app = () => { const divs = document.querySelectorAll('.div'); divs.forEach((div) => { div.addEventListener('click', () => clone(event)) })}clone = (event) => { const div = event.target; const clone = div.cloneNode(true); document.body.appendChild(clone) app() // <<<<<<-------HERE }这会以递归结束，因为每次单击它都会添加一个新的侦听器。https://codesandbox.io/s/agitated-cohen-0j6dm const clone = event => { const div = event.target; const cloned = div.cloneNode(true); document.body.appendChild(cloned); cloned.addEventListener("click", clone); };
随时随地看视频慕课网APP
相关分类
Html5