javascript – MutationObserver不适用于儿童

提前道歉可能是一个简单的问题,下面是令人震惊的javascript;

我的问题如下,网站上有一个横幅,每隔几秒就会有四张图片.我试图将一个“印象”推向数据层,由GTM接收.要显示下一个图像(不是我自己),将z-index从0更改为下一个横幅图像的1.我最初尝试让变异观察者只对一张图像起作用.这很有效,但我很快发现z-index值在确定为1之前实际上改变了3次,所以实际上每次都有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(我在这里尝试使用者返回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>

我将非常感谢任何人提供的任何帮助,我已经尝试过无处不在但却无法获得任何工作.

谢谢

解决方法:

{ attributes: true, childList: true }

请求由于.rotator_10690的属性更改而导致的突变以及由于代码子元素列表更改而导致的突变. childList从字面上听取对子列表的更改,它不会监听子项本身的更改.

如果你想要基本上获得所有孩子的所有突变,就像DOM事件在树上传播一样,你想要添加

subtree: true  

标签：javascript,mutation-observers
来源： https://codeday.me/bug/20190528/1169934.html