监听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; 属性使用开发工具就不能直接点到元素所在的代码位置

相关推荐
RoyLin1 分钟前
TypeScript设计模式:代理模式
前端·后端·typescript
IT_陈寒2 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿2 小时前
react 实现插槽slot功能
前端
stoneship2 小时前
Web项目减少资源加载失败白屏问题
前端
DaMu2 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员2 小时前
一文读懂Font文件
前端
Asort2 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer2 小时前
什么是 React 中的远程组件?
前端·react.js
真夜2 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app