Question

我想使用MutationObservers侦听具有（step）类的元素的特定类添加（step_active），但这似乎并没有达到预期的效果。

如果我直接通过 element.classList.add（）添加类，则会触发我的事件。但是，当网站发布这些类别时，这些类别会自行更改-我的事件未未触发。

这是为什么？

这是我当前代码的一般格式：

var target = document.querySelectorAll(".step");
for (var i = 0; i < target.length; i++) {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            var trigger = mutation.target;
            if(trigger.classList.contains('step_active')){
              window.dataLayer.push({
                event: 'Step: ' + mutation.id
              });
            }
        })
    });
    var config = {attributes: true, childList: true, subtree: true};
    observer.observe(target[i], config);
};

当我逐步执行页面上的步骤时，我希望这会推动一个带有mutation.id的唯一事件-但是事实并非如此。相反，这样做确实会产生我所期望的事件：

setTimeout(function(){
target[0].classList.add('step_active');
}, 1000);

任何人都可以对我的缺失/误解有什么了解吗？

Answer 1

正如wOxxOm所指出的，这是由于我观察到的元素被替换而不是被操纵而造成的，从而破坏了我的变异观察者。

可以通过人为地添加一个类和观察它是否随进度而保留。
或在DOM中将MutationObserver设置为更高级别并进行日志记录突变记录。

MutationObservers只听本地变化吗？

1 个答案: