MutationObserver 不适用于儿童答案

【问题标题】：MutationObserver not working for childrenMutationObserver 不适用于儿童
【发布时间】：2015-09-20 22:50:36
【问题描述】：

对于下面可能是一个简单的问题和令人震惊的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（我在这里尝试了 mutation.some 并返回 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>

任何人都可以提供任何帮助将不胜感激，我已经尝试过到处寻找，但无法得到任何工作。

谢谢

【问题讨论】：

标签： javascript mutation-observers

【解决方案1】：

{ attributes: true, childList: true }

由于.rotator_10690 的属性更改而请求突变，以及由于作为代码子元素的列表更改而导致的突变。 childList 字面意思是监听孩子列表的变化，它不监听孩子本身的变化。

如果你想从本质上得到所有子节点的所有突变，就像 DOM 事件在树上传播一样，你会想要添加

subtree: true

【讨论】：

非常感谢@loganfsmyth，我稍后会尝试这个。