使用了bind 之后 removeEventListener 不生效

最新推荐文章于 2024-11-23 20:19:54 发布

原创最新推荐文章于 2024-11-23 20:19:54 发布 · 668 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

日常填坑专栏收录该内容

15 篇文章

订阅专栏

博客围绕特定场景展开，指出在JavaScript里，.bind()方法会返回一个新函数而非原函数。解决办法是把.bind()返回的新函数重新赋值给旧函数。

场景：(见代码)

 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)
  }