1:取消监听事件

// vue2 取消不带参数的监听事件, 没什么好说的,如下面代码所示
mounted() {window.addEventListener("scroll", this.handeScroll, true)},
destroyed() {window.removeEventListener("scroll", this.handeScroll, true)},

2:取消带参数的监听事件

1:首先复习一下$on、 $once、 $of。

this.$on('foo', func) 监听事件,在 $emit 之前执行
this.$once('foo', func) 单次监听
this.$off('foo', func) 取消监听

2:解决方法
(1)有问题的解决方案

// 第一种
mounted() {
  window.addEventListener("scroll", (event)=>{
	this.handeScroll(event)
}, true)},
destroyed() {
  window.removeEventListener("scroll", (event)=>{
	this.handeScroll(event)
}, true)},
// 第二种
mounted() {
  window.addEventListener("scroll", function(event){
	this.handeScroll(event)
}, true)},
destroyed() {
  window.removeEventListener("scroll", function(event){
	this.handeScroll(event)
}, true)},

(2)解决方案的核心:监听事件和取消监听的回调函数使用匿名函数是没用的(划重点),当前的代码相当于新建了一个函数,然后试图从 window 的监听列表里移除。**addEventListener 的函数和 removeEventListener 的函数一定要是一个函数。可以用全局变量、也可以自己保存。**解决思路也很简单:用一个函数包裹这个请求的函数就可以了,如下面的解决方法
(3)没问题的解决方案

mounted() {
 // 1、定义一个方法存储touchmove的监听事件,由于监听事件不能使用匿名函数的原因,封装一下
 const handerScroll = (event) => {
   this.handleMyScroll(event);  // 2、你自己要更改的内容封装的函数
  }
  // 3、使用监听事件
  document.addEventListener('scroll', handerScroll , true);
  // 4、销毁前取消监听事件
  this.$once("hook:beforeDestroy", () => document.removeEventListener('scroll', handerScroll , true)); 
  // 使用$on也有一样的效果,不需要设置$emit,还有就是你要是不嫌麻烦的话,也可以通过$off在销毁前的生命周期里面
  // this.$on("hook:beforeDestroy", () => document.body.removeEventListener('scroll', handerScroll , true)); // 销毁前取消监听事件
},

参考文档https://segmentfault.com/q/1010000039986086

Logo

前往低代码交流专区

更多推荐