提前为可能是一个简单的问题和下面令人震惊的 javascript 道歉;
我的问题如下,网站上有一个横幅,每隔几秒钟就会显示四个图像。我正在尝试将“印象”推入数据层以供 GTM 拾取。为了显示下一个图像,我们(不是我自己)将下一个横幅图像的 z 索引从 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 (我在这里尝试了mutations.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>
任何人可以提供的任何帮助将不胜感激,我已经尝试到处寻找但无法得到任何工作。
谢谢
{ attributes: true, childList: true }
由于属性的改变而要求突变.rotator_10690
以及由于变化引起的突变the list作为代码子元素的元素。childList
从字面上看,它会监听子级列表的更改,但不会监听子级本身的更改。
如果你想基本上获得所有孩子的所有突变,就像 DOM 事件在树上传播的方式一样,你需要添加
subtree: true
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)