Javascript - cloneNode(true)，克隆太多项目答案

【问题标题】：Java Script - cloneNode(true), clone too much itemsJavascript - cloneNode(true)，克隆太多项目
【发布时间】：2020-03-27 20:30:50
【问题描述】：

我会进入正题

我在尝试什么？： 我尝试克隆项目，以便每个项目在单击时都克隆自身。甚至那些被克隆的。

问题： 问题是，当我克隆了例如 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>

【问题讨论】：

每次调用 app() 时都会添加更多的监听器！！ addEventListener 不会取代现有的。
你在哪里声明() => clone(event)中使用的event变量？
应该是(event) => clone(event)

标签： javascript html addeventlistener appendchild clonenode

【解决方案1】：

在单击后调用app() 时，您会为所有现有元素添加一个新的事件侦听器，这是对它们已经附加到它们的处理程序的补充。

不要在那里调用app，只需将侦听器添加到新创建的克隆。

其次，函数和变量使用相同的名称。这令人困惑。

所以以不同的方式命名该变量：

const clonedDiv = div.cloneNode(true);
document.body.appendChild(clonedDiv);
clonedDiv.addEventListener('click', clone);

如您所见，您也不需要那个箭头函数。只需将 clone 作为函数参数传递即可。

【讨论】：

太好了，我明白了，它应该可以正常工作，非常感谢:)

【解决方案2】：

在克隆函数中，您再次调用 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()，在clone函数的最后，只有原来的元素增加了更多的clone。我想点击一个被克隆的item后，它也克隆了自己。
你能检查一下 const clone = event => { const div = event.target;常量克隆 = div.cloneNode(true); document.body.appendChild(克隆); cl