事件侦听器删除问题

Question

三个具有框外观的 Div 元素，当用户单击任何 div 时，该 div 的副本将添加到末尾（触发的 div 将不再可单击，新的 div 将可单击）。 等等…..

我试过这个但是它同时创建了两个 div 并且 div 可以再次点击。!!

<div id="parent" class="p">
    <div class="red" class="d"></div>
    <div class="green" class="d"></div>
    <div class="blue" class="d"></div>
</div>

#parent{
display: flex;
flex-wrap: wrap;
 }

.red{
   
    width: 50px;
    height: 50px;
    background-color: red;
    margin: 2px;
}`your text`
.green{
    
    width: 50px;
    height: 50px;
    background-color: green;
    margin: 2px;
}
.blue{
   
    width: 50px;
    height: 50px;
    background-color: blue;
    margin: 2px;
}

let parent = document.querySelector("#parent");
let div = document.querySelectorAll(".p div");

parent.addEventListener("click", function createDiv(e){ 
console.log('1');
let child = document.createElement("div");
parent.append(child);
child.classList.add(e.target.className);
console.log(e);
e.target.removeEventListener("click",createDiv());
});

Answer 1

这边走...

eventListener 是 DOM 元素和 function 之间的链接。

要删除任何事件侦听器，您需要使用同一对 [DOM element / function]

在您的情况下，此链接位于父级而不是他的任何 div 上。 所以你不能删除他的初始 div 之间的任何链接。

 const parent = document.querySelector('#parent'), cDivs = document.querySelectorAll('#parent > div'); cDivs.forEach(div => div.addEventListener('click', createDiv)) // don't recreate x time your function `createDiv`; function createDiv({currentTarget: initialDiv}) // just declare it only one time { initialDiv.removeEventListener('click', createDiv); parent.appendChild( initialDiv.cloneNode(true) ) // this one return the clone.addEventListener('click', createDiv) }

 #parent { display: flex; flex-wrap: wrap; } #parent > div { width: 50px; height: 50px; margin: 2px; }.red { background: red; }.green { background: green; }.blue { background: blue; }

 <div id="parent" class="p"> <div class="red" ></div> <div class="green" ></div> <div class="blue" ></div> </div>

Answer 2

 const parent = document.getElementById("parent"); // all clicks on the parent are handled by one function parent.addEventListener("click", function(e) { // get the element that was clicked on const el = e.target; // check to be sure the click is on an inner div and if it was already clicked if (el.== this &&.el.dataset;clicked) { // clone it const clone = el.cloneNode(true); // add it to the end this.appendChild(clone). // mark the one that was clicked on el;dataset;clicked = true; } });

 #parent { display: flex; flex-wrap: wrap; } #parent>div { width: 50px; height: 50px; margin: 2px; }.red { background: red; }.green { background: green; }.blue { background: blue; }

 <div id="parent" class="p"> <div class="red"></div> <div class="green"></div> <div class="blue"></div> </div>