vue2如何取消带参数的监听事件
vue2如何取消带参数的监听事件
·
文章目录
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)); // 销毁前取消监听事件
},
更多推荐
已为社区贡献7条内容
所有评论(0)