MutationObservers только слушает локальные изменения? - PullRequest
Новая
       23

MutationObservers только слушает локальные изменения?

0 голосов
/ 26 апреля 2019

Я хотел использовать MutationObservers для прослушивания добавления определенного класса (step_active) к элементам с классом (step), однако, похоже, это не срабатывает совсем, как ожидалось.

Если я добавлюкласс напрямую через 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);

Может ли кто-нибудь пролить свет на то, что я упускаю / неправильно понял здесь?

1 Ответ

0 голосов
/ 29 апреля 2019

Как указывает wOxxOm, это было вызвано тем, что элементы, которые я наблюдал, заменялись, а не манипулировали, тем самым нарушая мой наблюдатель мутаций.

  1. Этот сценарий можно проверить, искусственно добавив класс и наблюдая, сохраняется ли оно по мере вашего продвижения.
  2. Или установка MutationObserver на более высокий уровень в DOM и ведение журнала запись мутации.
...