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

相关推荐
伟笑12 分钟前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
Sapphire~31 分钟前
重学前端003 --- CSS 颜色
前端·css
慧一居士31 分钟前
CSS和CSS3区别对比
前端·css3
我血条子呢32 分钟前
动态组件和插槽
前端·javascript·vue.js
中微子40 分钟前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪40 分钟前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
南屿im1 小时前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
I_have_a_lemon1 小时前
前端、产品、设计师神器推荐——Onlook
前端·cursor
前端小巷子1 小时前
深入解析CSRF攻击
前端·安全·面试
JustHappy1 小时前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构