MutationObserver не работает для детей

Question

Заранее извиняюсь за простой вопрос и ужасный javascript ниже;

Моя проблема в том, что на сайте есть баннер, который просматривает четыре изображения каждые несколько секунд. Я пытаюсь вставить "впечатление" в слой данных, который будет подхвачен GTM. Для отображения следующего изображения было сделано (не мной) изменение z-index с 0 на 1 следующего изображения баннера. Сначала я попытался заставить наблюдателя мутаций работать только с одним изображением. Это сработало, но вскоре я обнаружил, что значение z-index на самом деле меняется примерно в 3 раза, прежде чем остановиться на 1, так что фактически выдает 3 показа каждый раз. Однако в идеале я хотел бы, чтобы все это работало, глядя на родительский div (и наблюдая за childList), и генерировало только одно показание на каждое изображение баннера, но когда я пытаюсь это просто сказать "предоставленный узел был нулевым", мне интересно, если это делать с тем, что меняются только атрибуты детского стиля и больше ничего?

HTML-код баннера (когда отображается imagePane2);

<div id="rotator_10690" class="imageRotator Homepage_Middle_Banner_Rotator">
<div class="imagePane Homepage_Middle_Banner_imagePane imagePane1" style="left: 0px; top: 0px; position: absolute; z-index: 0; opacity: 1; display: none;">
<div class="imagePane Homepage_Middle_Banner_imagePane imagePane2" style="left: 0px; top: 0px; position: absolute; z-index: 1;">
<div class="imagePane Homepage_Middle_Banner_imagePane imagePane3" style="left: 0px; top: 0px; position: absolute; z-index: 0; display: none;">
<div class="imagePane Homepage_Middle_Banner_imagePane imagePane4" style="left: 0px; top: 0px; position: absolute; z-index: 0; display: none;">

Мой скрипт для родительского div

<script>
// select the target node
var target = document.querySelector('.rotator_10690');

//call mutation observer api
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
      if(mutation.type==="attributes" && mutation.target.className.indexOf("imagePane")) {
         observer.disconnect();
         dataLayer.push({'event': 'paneImpression'});

      }
  });
});
 
var disconnect = observer.disconnect();
// configuration of the observer:
// pass in the target node, as well as the observer options
var config = { attributes: true, childList: true }
observer.observe(target, config);

И только для imagePane2 (я попробовал mutations.some здесь с return false, чтобы попытаться остановить его после того, как он получил первую мутацию, но это не сработало. У меня также был zIndex==="1" здесь, но это все еще означало 3 или больше показов, стреляющих каждый раз.).

<script>
// select the target node
var target = document.querySelector('.imagePane2');

//call mutation observer api
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.some(function(mutation) {
      if(mutation.type==="attributes" && mutation.target.className.indexOf("imagePane2")) {
         observer.disconnect();
         dataLayer.push({'event': 'paneImpression', 'pane': 'two'});

         return false;

      }
  });
});
 
var disconnect = observer.disconnect();
// configuration of the observer:
// pass in the target node, as well as the observer options
var config = { attributes: true }
observer.observe(target, config);


 

</script>

Буду очень признателен за любую помощь, которую я могу предложить, я пытался искать везде, но не мог заставить что-либо работать.

Спасибо

Answer 1

{ attributes: true, childList: true }

просит мутаций из-за изменений в атрибутах .rotator_10690 и для мутаций из-за изменений в списке элементов, которые являются потомками кода. childList буквально слушает изменения в списке детей, он не слушает изменения самих детей.

Если вы хотите получить все мутации для всех дочерних элементов, точно так же, как события DOM распространяются вверх по дереву, вам нужно добавить

subtree: true  

Answer 2

Вам нужно добавитьsubtree: trueк конфигу.