Java 脚本 - cloneNode(true)，克隆太多项目

Question

进入正题

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

问题： 问题是，当我克隆了 10 个项目时，单击第一个（原始）项目后，它会克隆接下来的 10 个项目。只有最后一个（最新的）克隆，克隆一个元素，不管我已经有多少元素。

信息： "clone"函数末尾没有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>

Answer 1

在克隆函数中您再次调用了 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);
  };

Answer 2

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

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

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

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

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

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

Java 脚本 - cloneNode(true)，克隆太多项目

Java Script - cloneNode(true), clone too much items

html

javascript

clonenode

appendchild

addeventlistener