uni-app无法删除window的事件监听

uni-app无法删除window的事件监听

示例代码：

onLoad(options) {  
    window.addEventListener('popstate',this.back)  
},  
onUnload() {  
     // #ifdef H5  
    window.removeEventListener('popstate', this.back);  
     // #endif  
},  
back() {  
    console.log('1111111111');  
},

操作步骤：

  • 进入/pages/index/index页面，随便打开一个其它页面，比如/pages/index/a

预期结果：

  • 进入/pages/index/index页面进行事件监听，随便打开一个其它页面，onUnload(){}里面的window.removeEventListener应该正确删除事件监听

实际结果：

  • 进入/pages/index/index页面进行事件监听，随便打开一个其它页面，onUnload(){}里面的window.removeEventListener没有删除事件监听

bug描述：

  • window.addEventListener(‘popstate’,this.back)事件监听无法被取消

更多关于uni-app无法删除window的事件监听的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

hello , 注意一下 onUnload 的执行周期：https://uniapp.dcloud.net.cn/tutorial/page.html#onshow和onhide

更多关于uni-app无法删除window的事件监听的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，H5页面的事件监听确实需要注意解绑问题。从代码来看，主要问题可能出在以下两点：

  1. 事件解绑时函数引用不一致。this.back在添加和移除时必须是同一个函数引用。建议将back方法改为箭头函数或者在构造函数中绑定this：
// 方案1：使用箭头函数
back = () => {
    console.log('1111111111');
}

// 方案2：在构造函数中绑定
constructor() {
    this.back = this.back.bind(this);
}
  1. uni-app的页面生命周期中，onUnload在某些情况下可能不会触发。可以尝试同时在onHide生命周期中也添加解绑逻辑：
onHide() {
    // #ifdef H5
    window.removeEventListener('popstate', this.back);
    // #endif
}

另外，建议在添加事件监听前先移除，避免重复添加：

onLoad(options) {
    // #ifdef H5
    window.removeEventListener('popstate', this.back);
    window.addEventListener('popstate', this.back);
    // #endif
}
回到顶部