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>

</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