「已注销」 2022-05-15 00:08 采纳率: 100%
浏览 1042
已结题

window.removeEventListener无法删除事件

问题遇到的现象和发生背景

在做个人网站时,想做个无线滚动条分页加载数据
由于对于前端不是过于深入
所查了查博客,用了个还能看的懂的方法

问题相关代码
mounted() {
    this.get_type();//加载博客类型数据
    this.get_data();//加载博客数据
    this.add_watch()//添加滚动条监听事件
  },
  beforeDestroy () {
    this.remove_watch()
  },
  methods: {
    //监听函数
    scroll(){
     window.onscroll = () => {
       // 整个页面的高度
       const scrollHeight = document.body.scrollHeight
       // 当前可视区的顶部到页面顶部的高度,||是做兼容处理的
       const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
       // 当前可视区的高度
       const clientHeight = document.documentElement.clientHeight
       // 可视区底部到页面底部的高度,即滚动条与底部的距离
       const instance = scrollHeight - scrollTop - clientHeight
       // 当滚动条与底部的距离小于0时就触发加载数据
       if (instance < 0) {
         this.page++;
         this.get_data();//加载数据
       }
     }
    },
    //添加滚动条监听事件
    add_watch(){
      window.addEventListener('scroll',this.scroll, true);//false和true都试过
    },
    // 删除滚动条滚动的监听事件
    remove_watch(){
      window.removeEventListener('scroll',this.scroll, true);
      console.log("删除事件")
    },
运行结果及遇到的问题

当触发滚动条加载数据后,跳转到其它路由后,监测滚动条事件未被删除
当滚动条一但发生改变后就无法使用removeEventListener删除该事件

img

跳转到个人主页后,滚动条事件未被删除!

img

滚动条到底时依然触发,调用着首页内的获取数据函数

我的解答思路和尝试过的方法

在首页
添加一个删除事件按钮

img

发现当滚动条未动时,点击按钮能删除该事件

img

滚动条一但发生改变,点击按钮不能删除该事件

看了很多博客,发现都与我的不一样

我想要达到的结果

当跳转路由时,触发事件将监测滚动条事件删除

  • 写回答

2条回答 默认 最新

  • v逆水行舟v 2022-05-15 08:11
    关注

    我看你在this.scroll这个方法里又加载了一遍window.onscroll方法了,removeEventListener是移除的addEventListener scroll这个事件,但是window.onscroll是不被移除的。
    建议修改是吧window.onscroll去掉,再试试。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月23日
  • 已采纳回答 5月15日
  • 创建了问题 5月15日

悬赏问题

  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来