如何在不丟失附加到按鈕的事件偵聽器的情況下移動我的 html 元素？
克隆并移除原始元素后，子按鈕的事件偵聽器不起作用
ul.appendChild(element.cloneNode(true));
element.remove();
uj5u.com熱心網友回復：
您已經說過要移動它，但您所做的是克隆它，保存克隆，然后洗掉并丟棄原始的。相反，不要克隆它，移動它：
ul.appendChild(element);
這element將從其當前父項中洗掉并將其放入新的父項 ( ul) 中，所有事件偵聽器仍在原位。
現場示例：
顯示代碼片段
// NOTE: This isn't how I'd write this code if I weren't demonstrating
// the fact the listeners are retained when the element is moved.
// But without context, it's hard to show a delegation solution.
const list1 = document.getElementById("list1");
const list2 = document.getElementById("list2");
// Add a listeneer to each `li`
document.querySelectorAll("li").forEach((li, index) => {
li.addEventListener("click", () => {
console.log(`Moving "${li.textContent}" which was originally at index ${index}`);
if (li.closest("ul") === list1) {
// Move from list1 to list2
list2.appendChild(li);
} else {
// Move from list2 to list1
list1.appendChild(li);
}
});
});li {
cursor: pointer;
}<div>List 1:</div>
<ul id="list1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div>List 2:</div>
<ul id="list2">
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<div>Click an item to move it to the other list.</div>也就是說，當處理在父級之間移動的元素時，我經常發現事件委托是最好的，但這實際上取決于具體情況。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/359546.html
標籤：javascript dom 事件 dom事件
上一篇：Vue更改為陣列而不更新DOM