我會進入正題我在嘗試什么？： 我嘗試克隆項目，以便每個項目在單擊時都會克隆自身。即使是那些被克隆的。問題： 問題是，當我克隆了 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>
2 回答
慕哥9229398
TA貢獻1877條經驗 獲得超6個贊
單擊后調用時app()，您可以向所有現有元素添加一個新的事件偵聽器，這是對它們已附加的處理程序的補充。
無需app在那里調用，只需將偵聽器添加到新創建的克隆即可。
其次，函數和變量使用相同的名稱。這很令人困惑。
因此以不同的方式命名該變量：
const clonedDiv = div.cloneNode(true);
document.body.appendChild(clonedDiv);
clonedDiv.addEventListener('click', clone);如您所見，您也不需要該箭頭函數。clone只需作為函數參數傳遞即可。
幕布斯6054654
TA貢獻1876條經驗 獲得超7個贊
在克隆函數中，您再次調用 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);
};
- 2 回答
- 0 關注
- 187 瀏覽
添加回答
舉報
0/150
提交
取消