gpt4 book ai didi

javascript - 突变观察器仅在父元素上触发

转载 作者:行者123 更新时间:2023-11-28 16:56:15 26 4
gpt4 key购买 nike

我正在尝试使用 MutationObserver 来监视应用程序库中已删除的节点,但似乎当删除(或替换)父元素时,它不会触发所有子元素的回调。

<button class="RemoveListButton">Remove List</button>
<div class="Container">
<ul class="ShoppingList">
<li class="Item">Pasta</li>
<li class="Item">Chips</li>
<li class="Item">Salsa</li>
</ul>
</div>
const removeWatcher = new MutationObserver(mutationList => {
const removedNodes = mutationList.flatMap(m => [...m.removedNodes])
console.log('Removing', removedNodes)
})

const container = document.querySelector('.Container')
removeWatcher.observe(container, { subtree: true, childList: true })

/* additional javascript to remove elements on click */

参见 JSFiddle https://jsfiddle.net/eq4ahsvc/3/

在示例中,当我删除单个列表项(通过单击它)时,我在控制台中看到该元素已被删除并被突变观察器看到。

但是,当我删除整个列表时,只会为父元素触发 Mutation Observer 回调,而不是单个子元素。

有办法配置此行为吗?理想情况下,每个元素都会触发 MutationObserver 回调,这样在删除列表时,我会看到删除列表的触发器,以及删除每个子元素的触发器。

最佳答案

子元素不会从其父元素中删除,因此没有要观察的删除事件。请参阅:

const ul = document.querySelector('ul');
const li = ul.children[0];
ul.remove();

console.log(li.parentElement);
<button class="RemoveListButton">Remove List</button>
<div class="Container">
<ul class="ShoppingList">
<li class="Item">Pasta</li>
<li class="Item">Chips</li>
<li class="Item">Salsa</li>
</ul>
</div>

如您所见,<li> s 仍然有 .ShoppingList 的父元素,因为.ShoppingList已从容器中取出,但个体<li> s 未从 .ShoppingList 中删除.

如果您想查看每个已删除的事件<li> ,除了删除 .ShoppingList 之外,您还必须明确地迭代并删除它们。 :

const removeWatcher = new MutationObserver(mutationList => {
const removedNodes = mutationList.flatMap(m => [...m.removedNodes])
console.log('Removing', removedNodes)
})

const container = document.querySelector('.Container')
removeWatcher.observe(container, { subtree: true, childList: true })

const button = document.querySelector('.RemoveListButton')
button.onclick = () => {
document.querySelectorAll('.ShoppingList > li').forEach(li => li.remove());
document.querySelector('.ShoppingList').remove()
}

const listItems = document.querySelectorAll('.Item')
listItems.forEach(item => item.onclick = () => {
event.target.remove()
})
<button class="RemoveListButton">Remove List</button>
<div class="Container">
<ul class="ShoppingList">
<li class="Item">Pasta</li>
<li class="Item">Chips</li>
<li class="Item">Salsa</li>
</ul>
</div>

对于你想要的,要么这样做,要么递归地展平 removedNodes 中每个项目的所有子项。观察者回调中的数组。

关于javascript - 突变观察器仅在父元素上触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59082930/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com