Javascript 将“显示”设置为“无”时未触发MutationObserver

我有一个名为“cover”的节点，当ajax层基于它是我们的面纱而想要隐藏/显示它时，它会被设置为可见或不可见。但我们希望我们的面纱不仅仅是一个可见或不可见的节点。所以我写了一个MutationObserver来观察变化并做额外的工作。当节点更改为display:block时，这可以正常工作。更改为“显示：无”时不会激发

您可以看到下面的观察者，在这个和断点之间，我确信它永远不会在显示中被调用：无更改。是的，我可以看到观察名单上发生了变化。这在IE和Chrome中都会发生

这是预期的吗？我没想到。但如果是这样的话，我怎样才能得到显示：无事件

启动观察者的调用：

veilObserver.observe(cover, { attributes: true, childList: false, subtree: false });

const veilObserver = new MutationObserver(function(mutationsList, observer) {
console.log("MutationObserver enter");
var cover = document.getElementById('cover');

if(cover) {
    console.log("MutationObserver cover");
    if(cover.style.display == 'none') {
        console.log("MutationObserver closing");
        closeVeil();
    } else if(cover.style.display == 'block') {
        openVeil();
    } else {
        //this should never happen, but if it does, we want to make sure the veil is closed because we don't know whether it should be open or
        //closed and I'd rather default to open so the user isn't locked forever. 
        console.log('Mutation!!! but display not recognized: ' + cover.style.display);
        closeVeil();
    }
} else {
    console.log("MutationObserver disconnecting");
    //this implies the page lacks the required HTML.  Disconnect the observer and don't both them again.
    veilObserver.disconnect();
}

观察员：

veilObserver.observe(cover, { attributes: true, childList: false, subtree: false });

const veilObserver = new MutationObserver(function(mutationsList, observer) {
console.log("MutationObserver enter");
var cover = document.getElementById('cover');

if(cover) {
    console.log("MutationObserver cover");
    if(cover.style.display == 'none') {
        console.log("MutationObserver closing");
        closeVeil();
    } else if(cover.style.display == 'block') {
        openVeil();
    } else {
        //this should never happen, but if it does, we want to make sure the veil is closed because we don't know whether it should be open or
        //closed and I'd rather default to open so the user isn't locked forever. 
        console.log('Mutation!!! but display not recognized: ' + cover.style.display);
        closeVeil();
    }
} else {
    console.log("MutationObserver disconnecting");
    //this implies the page lacks the required HTML.  Disconnect the observer and don't both them again.
    veilObserver.disconnect();
}

}))

从文档中复制并根据您的代码进行定制。 您应该尝试观察#cover的父元素。这样就可以观察到该元素内部的任何突变

从文档中复制了此内容，并根据您的代码进行了定制。 您应该尝试观察#cover的父元素。这样就可以观察到该元素内部的任何突变

---

如果您无法确定要观察哪个父级的属性更改，您可以观察文档上的所有属性更改，尽可能过滤不相关的更改，然后检查元素是否可见

var observer;
observer = new MutationObserver(function(mutations) {
    let cover = document.getElementById('cover')
    if (!cover) observer.disconnect()
    if (!isVisible(cover)) console.log("closing"); 
    else console.log("opening")
});
// main diffrence is the target node to listen to is now document.body
observer.observe(document.body, { 
    attributes: true,
    attributeFilter: ['style'],
    subtree: true
});
function isVisible(element) { return (element.offsetWidth > 0 && element.offsetHeight > 0) }

---

如果您在确定要观察哪个父元素的属性更改时遇到困难，可以观察文档上的所有属性更改，尽可能过滤不相关的更改，然后检查元素是否可见

var observer;
observer = new MutationObserver(function(mutations) {
    let cover = document.getElementById('cover')
    if (!cover) observer.disconnect()
    if (!isVisible(cover)) console.log("closing"); 
    else console.log("opening")
});
// main diffrence is the target node to listen to is now document.body
observer.observe(document.body, { 
    attributes: true,
    attributeFilter: ['style'],
    subtree: true
});
function isVisible(element) { return (element.offsetWidth > 0 && element.offsetHeight > 0) }

---

我应该提到，我无法控制将显示设置为“无”或“块”的代码。因此，我依赖于观察者。假设更改作为实际DOM节点上的属性发生，而不是在stylsheet对象规则中发生（这不可能通过MutationObserver检测到），则节点很可能完全通过parent.replaceChild或类似方法被替换。在父级上设置DOM断点，并检查执行交换的源代码。如果我的猜测是正确的，您需要

childList:true

并观察未交换的节点的祖先（这不一定是直接的父节点）。我应该提到，我无法控制将显示设置为“无”或“块”的代码。因此，我依赖于观察者。假设更改作为实际DOM节点上的属性发生，而不是在stylsheet对象规则中发生（这不可能通过MutationObserver检测到），则节点很可能完全通过parent.replaceChild或类似方法被替换。在父级上设置DOM断点，并检查执行交换的源代码。如果我的猜测是正确的，您需要

childList:true

并观察未交换的节点的祖先（这不一定是直接的父节点）。