监听html元素是否被删除,删除之后重新生成被删除的元素

javascript 复制代码
/**
 * 监听水印是否清除和修改
 */
export function watermarkClear() {
  // 添加水印的盒子
  let box: any = document.querySelector('.dplayer-video-wrap')
  // 水印
  let watermark: any = document.querySelector('.dplayer-logo')
  // 观察器的配置(需要观察什么变动)
  const config = { attributes: true, childList: true, subtree: true };
  // 当观察到变动时执行的回调函数
  const callback = function (mutationsList: any, observer: any) {
    watermark = document.querySelector('.dplayer-logo')
    let watermarkImg = document.querySelector('.dplayer-logo img')
    if (!watermark || !watermarkImg) {
      watermark?.remove()
      const div = document.createElement("div");
      div.className = "dplayer-logo"
      div.innerHTML = `<img src="${'/_nuxt/assets/images/AppOverall/watermark.png'}" alt="">`
      box?.appendChild(div)
    }
  };

  // 创建一个观察器实例并传入回调函数
  const observer = new MutationObserver(callback);

  // 以上述配置开始观察目标节点
  observer.observe(box, config);

}

调用

javascript 复制代码
watermarkClear()

监听的元素

这个元素被删除之后在这个父盒子里面重新生成

扩展:

元素加 pointer-events: none; 属性使用开发工具就不能直接点到元素所在的代码位置

相关推荐
Li_Ning218 分钟前
为什么 Vite 速度比 Webpack 快?
前端·webpack·node.js
2501_915373888 分钟前
Electron 入门指南
前端·javascript·electron
同志327131 小时前
用HTML+CSS做了一个网易云音乐客户端首页
前端·css
小猪欧巴哟1 小时前
pnpm install 安装项目依赖遇到 illegal operation on a directory, symlink 问题
前端·vue.js
独角仙梦境1 小时前
🚀🚀🚀学习这个思路,你也能手撸自己的专属vip脚手架🚀🚀🚀
前端
CJWbiu1 小时前
Github Action + docker 实现自动化部署
前端·自动化运维
关山1 小时前
在TS中如何在子进程中动态实例化一个类
前端
吃瓜群众i1 小时前
兼容IE8浏览器的8个实用知识点
前端·javascript
前端烨1 小时前
vue3子传父——v-model辅助值传递
前端·vue3·组件传值
猫头虎2 小时前
如何解决IDE项目启动报错 error:0308010C:digital envelope routines::unsupported 问题
javascript·ide·vue.js·typescript·node.js·编辑器·vim