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

相关推荐
qq. 28040339846 小时前
CSS层叠顺序
前端·css
喝拿铁写前端6 小时前
SmartField AI:让每个字段都找到归属!
前端·算法
猫猫不是喵喵.6 小时前
vue 路由
前端·javascript·vue.js
烛阴7 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin91537 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
GISer_Jing7 小时前
[Html]overflow: auto 失效原因,flex 1却未设置min-height &overflow的几个属性以及应用场景
前端·html
程序员黄同学8 小时前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
拉不动的猪8 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
再学一点就睡8 小时前
浏览器页面渲染机制深度解析:从构建 DOM 到 transform 高效渲染的底层逻辑
前端·css
拉不动的猪8 小时前
刷刷题48 (setState常规问答)
前端·react.js·面试