MutationObserver 不适合儿童

2024-05-05

提前为可能是一个简单的问题和下面令人震惊的 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(使用前将#替换为@)

MutationObserver 不适合儿童 的相关文章

  • 如何向上转型以限制对象属性

    在 JavaScript 中 如何从子类向上转换到超类以自动删除超类中不存在的对象属性 示例 假设有以下 2 个类 class ClassA constructor public a string public b string class
  • Angular 4 过滤器搜索自定义管道

    所以我试图构建一个自定义管道来在 ngFor 循环中执行多个值的搜索过滤器 我花了几个小时寻找一个好的工作示例 其中大多数都是基于以前的版本 并且似乎不起作用 所以我正在构建管道并使用控制台为我提供值 但是 我似乎无法显示输入文本 以下是我
  • 如果没有“new”,则无法调用类构造函数

    感谢这个问题已经被问过几次了 但是我遇到的几乎所有情况都是有人试图扩展非本地类的情况 我的情况有所不同 我有一个非常简单的基类 名为CObject如下 export class CObject extends BaseObject cons
  • 如何判断一个网页是否支持jquery?

    确定网页是否启用 jquery 的最佳方法是什么 如果这是确定它的最佳方法 则使用 jquery 本身 if jQuery jquery object exists jQuery 并不神奇 它本质上只是一个大对象 您可以像检查任何其他对象一
  • 在 jQuery .live() 方法中模拟“焦点”和“模糊”

    Update 从 jQuery 1 4 开始 live 现在支持focusin and focusout events jQuery http www jquery com currently1 doesn t support blur o
  • 在 R 传单中添加不透明度滑块

    如何在 R leaflet 应用程序中添加滑块来控制特定图层的不透明度 对于这个应用程序 我不想使用闪亮 这里建议 在 R 传单应用程序中添加滑块 https stackoverflow com questions 37682619 add
  • 如何使 d3 饼图响应式?

    我有一个 PIE 图表 它工作正常 但我无法使其具有响应能力和可调整大小 我需要它与移动浏览器和 iPad 等兼容 div div
  • 这种类型注释在没有 TypeScript 的 React 代码中如何工作?

    我在看这段代码示例 https reacttraining com react router web example auth workflow在 ReactRouter 页面上 这篇文章很有趣 const PrivateRoute com
  • 访问 nuxt 配置文件中的存储

    我想添加通过 Nuxt 静态生成的动态路由 我定义了一个客户端 服务器端存储asyncData方法 我想将这个存储值 一个数组 映射到我的nuxt config js文件使其成为 动态 静态 路线图nuxt generate命令 但如何访问
  • 将 Firebase FCM 添加到 ReactJS 应用程序

    我正在尝试向我的 ReactJS 应用程序中的用户发送推送通知 我已添加 firebase 请求用户通知权限 这正在发挥作用 但现在我想注册设备令牌 但这给了我错误 消息传递 我们无法注册默认的 Service Worker 无法注册 Se
  • 如何仅显示/隐藏此 bootstrapvue 表的第二列和第三列?

    下面的代码将显示 隐藏 a 中的所有列BootstrapVue桌子 代码的来源就是这里的答案 使用 bootstrap vue 组件和 bootstrap 3 动态显示 隐藏列 https stackoverflow com questio
  • 模板中带有 ng-if 的 angularjs 指令

    我正在构建一个在模板内使用 ng if 的指令 奇怪的是 提供给链接函数的元素没有扩展ng if代码 它只是ng if的注释行 经过一番尝试 我发现通过将链接代码包装在 timeout 中似乎可以使其正常工作 但我想知道这是否不是正确的处理
  • javascript 是否有等效的 __repr__ ?

    我最接近Python的东西repr这是 function User name password this name name this password password User prototype toString function r
  • 类中可以有生成器 getter 吗?

    我的意思是吸气剂是发电机 我相信这一切都是 ES6 也许像这样 class a get count let i 10 while i yield i let b new a for const i of b count console lo
  • 如何为我的整个 Node.js 应用程序使用相同的 MySQL 连接?

    我有一个app js 我从那里运行我的整个应用程序 在 app js 内部 我require许多文件中都有代码 对于每个文件 我都这样做 var mysql require mysql var mclient mysql createCon
  • 摩纳哥:如何添加内联自动完成/代码建议?

    我找不到任何有关如何添加内联自动完成功能的示例 如下图所示 有人可以指导我如何在摩纳哥做到这一点吗 这可以在 v1 66 中启用 现在在 Insiders 中 The editor quickSuggestions设置现在接受内联为 配置值
  • ChartJs:如何按时间值(而不是像素)以编程方式平移

    我使用的是chartJs 3 6 1 和 Chartjs plugin zoom 1 2 1 但我认为这并不重要 我有 2 个时间序列折线图 当我通过拖放平移一个图表时 我也想移动 平移另一个图表 为此 我为 graphA 启用了缩放 平移
  • 尝试使用 Javascript 解决对称差异

    我正在尝试找出对称的解决方案 使用 javascript 完成以下任务的差异 目标 接受未指定数量的数组作为参数 保留数组中数字的原始顺序 不删除单个数组中数字的重复项 删除数组中出现的重复项 因此 例如 如果输入是 1 1 2 6 2 3
  • d3.event.translate 在触摸设备的缩放上包含 NaN

    我使用 d3 为我的 svg 编写了一个自定义缩放函数 如下所示 Zoom behavior function myzoom xpos d3 event translate 0 ypos d3 event translate 1 vis a
  • 如何在运行脚本之前提交活动单元格中所做的更改? (Google 表格/Google Apps 脚本)

    我正在使用 Google Apps 脚本在 Google 表格中创建提交表单 该表单位于一页上 提交内容被移至第二个隐藏页面 当用户填写表单后 他们按下提交页面上的按钮以激活脚本 我遇到的问题是 当用户填写最后一个单元格然后单击按钮时 输入

随机推荐

  • 有没有 C# 到 C 的转换工具? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我知道 C 与 NET Framework 不同 C 是一种符合 ECMA ECMA 334 和 ISO
  • 如何提取Python代码文件中使用的函数?

    我想创建代码文件中使用的所有函数的列表 例如 如果我们在名为 add random py 的文件中有以下代码 import numpy as np from numpy import linalg def foo print np rand
  • C++ 中的 Ofstream 数组

    我想要在我的项目中使用 41 个输出文件来在其上写入文本 首先创建一个字符串数组list为了命名这些输出文件 然后我尝试定义一个 ofstream 对象数组并使用list命名它们 但我收到此错误 outfile cannot be used
  • 重写 AngularJs DatePicker 弹出窗口以添加新标题

    这个问题说明了一切 我已经搜寻过高低 但没有找到办法 但是 在我破解模板之前 我想我会在这里问 只是为了说清楚 我希望能够在日期选择器的顶部添加一些文本 这是一个弹出窗口 如果这有什么区别的话 例如 你的生日是什么时候 如果您遵循本主题 有
  • 使列在引导程序中固定位置

    使用 Bootstrap 我有一个网格列 class col lg 3 我想将其放置在位置 固定 而另一个 col lg 9 是正常位置 可滚动页面 div class row div class col lg 3 Fixed conten
  • 为什么我在使用 MVC4 时会收到“无效的对象名称 'dbo.*'”错误?

    我收到此错误 对象名称 dbo ImageMetas 无效 在这一行 返回视图 db Images ToList 我的数据库上下文如下所示 public class GalleryContext DbContext public Galle
  • 如何检查多个变量是否等于同一值?

    如何比较多个项目 例如 我希望检查所有变量 A B 和 C 是否都等于字符 X 或所有三个变量都等于 O 如果其中 2 个为 X 1 个为 O 则应返回 false I tried if A B C X A B C O Do whateve
  • 如何在 VB.NET 中单击按钮切换表单语言?

    我想创建本地化应用程序并想要实现语言切换器 例如特殊按钮 我使用 Visual Studio 2010 Express VB NET 我创建了带有一个标签和一个按钮的简单测试应用程序 我将表单的属性 Localized 设置为 True 并
  • Cobertura 显示覆盖率 0%

    我使用 Cobertura 1 9 3 与 NetBeans 6 8 Ant 1 7 1 和 JDK 1 6 0 21 一起运行 WAR EJB JUnit 4 测试 当我改变线路时pathelement location build cl
  • HWND 创建时间

    我是这个社区的新手 在使用我的自动化脚本 1 时遇到一个问题 我想获取 HWND 的创建时间 我在从 FindWindowEx 检索到的数组中有一组 HWND 我想在数组中找到最后根据系统时间创建的 HWND 我对窗口钩子没有足够的了解 但
  • 将 csv 解析输出保存到变量

    我是使用 csv parse 的新手 项目 github 中的这个示例满足了我的需要 但有一个例外 我不想通过 console log 输出 而是想将数据存储在变量中 我尝试将 fs 行分配给变量然后返回data而不是记录它 但这只是返回了
  • 根据另一个输入限制闪亮的应用程序输入

    我有一个基本的闪亮应用程序可以评估A B library shiny ui lt fluidPage numericInput inputId A label A value 5 step 1 sliderInput inputId B l
  • 如何在 Android 上从后台线程显示 Toast?

    我怎样才能显示Toast http developer android com guide topics ui notifiers toasts html来自线程的消息 您可以通过调用Activity s runOnUiThread您线程中
  • Xcode -- 让force_load 使用相对路径

    某些库在链接到 Xcode 项目时需要 all load 链接器标志 但是 如果库之间存在符号冲突 这会导致链接器错误 解决方案是使用 force load 它可以有效地让您在某些库上使用 all load 但不能在其他库上使用 然而 这反
  • 通过 boost::python 将 C++ 对象传递给 python 函数

    我想在 C 应用程序中使用嵌入 python 并调用 python 脚本中定义的函数 该函数的参数是一个 C 对象 看我的代码 class Test public void f std cout lt lt sss lt
  • 特定领域语言与函数库

    这可能是主观的 我不知道 我有这个问题 我有点等同于 这个项目用什么语言 问题 因为我似乎无法解决它 我受委托为一个非常精通技术的社区 但不是程序员 写一本关于某个领域 比如说物理学的一个非常具体的分支 的书 这是一本关于他们日复一日使用的
  • UIDocumentsInteractionController 显示 iBooks 但不打开它

    我的 UIDocumentsInteractionController 正在工作 提供一个带有 iBooks 按钮的操作表 但是当我单击该按钮时 它只是关闭并且不会将我带到 iBooks 这是我的代码 NSString filenamePa
  • Selenium - 运行 javascript

    我有一个愚蠢的问题 如何运行位于测试站点上的脚本 我可以运行警报 但我无权访问我编写的脚本 我尝试过 runscript geteval 没有任何效果 由于 Selenium 是用 JavaScript 编写的 因此 window 对象会移
  • 查找 div 元素中的所有链接并禁用它们

    假设我有一些如下所示的 HTML 元素 div span a href some link Click me a span div Hello everybody Click a href some link else me a to do
  • MutationObserver 不适合儿童

    提前为可能是一个简单的问题和下面令人震惊的 javascript 道歉 我的问题如下 网站上有一个横幅 每隔几秒钟就会显示四个图像 我正在尝试将 印象 推入数据层以供 GTM 拾取 为了显示下一个图像 我们 不是我自己 将下一个横幅图像的