Vue项目中无法移除事件监听问题

Vue项目中无法移除事件监听问题

  • 在一次Vue项目开发中,给window绑定了addEventListener事件,然后在离开组件的时候调用removeEventListener移除事件,但是发现没有生效
    • 错误示例
      • 下面这样操作,是无法移除事件的
    • 正确示例
      • 后来查找到Vue中事件监听的第二个参数处理函数需要绑定到this上,并且removeEventListener 和 addEventListener 中对应的参数要一致

在一次Vue项目开发中,给window绑定了addEventListener事件,然后在离开组件的时候调用removeEventListener移除事件,但是发现没有生效

错误示例

下面这样操作,是无法移除事件的

created() {
    window.addEventListener('mousemove', () => {
      console.log(1111)
    })
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', () => {
      console.log(1111)
    })
  }

正确示例

后来查找到Vue中事件监听的第二个参数处理函数需要绑定到this上,并且removeEventListener 和 addEventListener 中对应的参数要一致

created() {
    window.addEventListener('mousemove', this.eventHandler)
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.eventHandler)
  },
methods: {
  eventHandler(e) {
     console.log(1111)
  }
}

你可能感兴趣的:(Vue项目中无法移除事件监听问题)