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

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日

悬赏问题

  • ¥15 esp8266控制共阳极wrgb灯板无法关闭所有led灯
  • ¥100 python读取速度问题
  • ¥15 stm32f407使用DMA问题
  • ¥15 您好 这个API接口该怎么弄 网站搭建好了 API也有 现在就不知道该怎么填写API 不知道怎么用
  • ¥88 用uniapp写一个多端的程序,用到高德地图,用高德的JSAPI吗?
  • ¥20 关于#c++#的问题:水果店管理系统
  • ¥30 dbLinq最新版linq sqlite
  • ¥20 对D盘进行分盘之前没有将visual studio2022卸载掉,现在该如何下载回来
  • ¥15 完成虚拟机环境配置,还有安装kettle
  • ¥15 有人会搭建生鲜配送自营+平台的管理系统吗