MutationObserver as 属性 of object 断开连接后无法立即观察

Question

我有以下 class:

class CustomOption extends HTMLElement {
    constructor() {
        super();
        this.addEventListener("mousedown", this.isSelecting);
        this.addEventListener("mouseup", this.setSelection);
        this.addEventListener("mouseenter", this.startHover);
        var customOption = this;
        this.observer = new MutationObserver(function(mutationsList, observer) {
            customOption.customSelect.adjustSize();
            customOption.backgroundColor = customOption.style.backgroundColor;
            if (customOption.customSelected.hoveredOption == customOption) {
                customOption.setBackgroundColorUnobtrusively(customOption.selectedColor);
            }
        });
        this.observer.observe(this, { childList: true, characterData: true, subtree: true, attributes: true, attributeFilter: ["style"] });
    }

    ...

    setBackgroundColorUnobtrusively(color) {
        this.observer.disconnect();
        this.style.backgroundColor = color;
        this.observer.observe(this, { characterData: true, subtree: true, attributes: true, attributeFilter: ["style"] });
    }
}

当我在 CustomOption 对象上调用 setBackgroundColorUnobtrusively 时，观察者实际上并没有再次开始观察。但是，如果我在浏览器中转到控制台并以这种方式执行此操作，它在再次调用 disconnect 和 observe 后仍然有效：

var x = document.getElementsByTagName("custom-option")[0];
var observer = new MutationObserver(function(mutationsList, observer) {
    x.customSelect.adjustSize();
    x.backgroundColor = x.style.backgroundColor;
    if (x.customSelected.hoveredOption == x) {
        x.setBackgroundColorUnobtrusively(x.selectedColor);
    }
});
observer.disconnect();
x.style.backgroundColor = "white";
observer.observe(x, { characterData: true, subtree: true, attributes: true, attributeFilter: ["style"] });

知道为什么会这样吗？它与对 MutationObserver 的引用有关吗？我已经检查过 this in setBackgroundColorUnobtrusively 似乎绑定正确。这让我觉得很奇怪...

Answer 1

问题很简单：

在构造函数中，我在调用 observe 时将 childList: true 包含在 options 参数中，但是，当我在 [=12= 中再次开始观察时], 我没有包括那个选项。

要点：在观察中列出您的选项时要小心，并确保您知道它们的作用！

More info on options for observe

MutationObserver as 属性 of object 断开连接后无法立即观察

MutationObserver as property of object fails to observe immediately after being disconnected

javascript

mutation-observers