使用了bind 之后 removeEventListener 不生效

最新推荐文章于 2023-11-30 16:33:10 发布

右边的疯子

最新推荐文章于 2023-11-30 16:33:10 发布

阅读量631

点赞数 2

CC 4.0 BY-SA版权

分类专栏：日常填坑文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_20574857/article/details/109749063

日常填坑专栏收录该内容

15 篇文章

订阅专栏

场景：(见代码)

 addBodyMove(){
    this.bodyDom.addEventListener('touchmove',this.bodyMove.bind(this),{ passive: false })
  }
  addBodyMoveEnd(){
    this.bodyDom.addEventListener('touchend',this.bodyMoveEnd.bind(this),{ passive: false })
  }
  removeBodyMove(){
    this.bodyDom.removeEventListener('touchmove',this.bodyMove)
  }
  removeBodyMoveEnd(){
    this.bodyDom.removeEventListener('touchend',this.bodyMoveEnd)
  }

touchmove 事件一直无法 removeEventListener；

问题解决：

.bind()方法会返回新一个新函数，并不是之前的函数了。

将.bind()返回的新函数重新赋值给旧函数，如下

 addBodyMove(){
    this.bodyMove = this.bodyMove.bind(this);
    this.bodyDom.addEventListener('touchmove',this.bodyMove,{ passive: false })
  }
  addBodyMoveEnd(){
    this.bodyMoveEnd = this.bodyMoveEnd.bind(this)
    this.bodyDom.addEventListener('touchend',this.bodyMoveEnd,{ passive: false })
  }
  removeBodyMove(){
    this.bodyDom.removeEventListener('touchmove',this.bodyMove)
  }
  removeBodyMoveEnd(){
    this.bodyDom.removeEventListener('touchend',this.bodyMoveEnd)
  }