javascript – MutationObserver不适用于儿童

2019-05-28 09:23:32 阅读：195 来源： 互联网

提前道歉可能是一个简单的问题,下面是令人震惊的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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – MutationObserver不适用于儿童