Question

我一直在玩es6类，并尝试设置一个简单的鼠标类。

key有效，但出于某种原因，我无法使用addEventListener删除它们。我猜这与上下文绑定有关，但我无法弄清楚如何解决这个问题。

removeEventListener

Answer 1

每次拨打this.clicked.bind(this)时，都会返回一个新的不同功能。因此，传递给addEventListener()的函数与传递给removeEventListenter()的函数不同，因此删除不会找到匹配项，也不会删除任何内容。您必须将完全相同的功能传递给两者才能使删除工作。

您必须创建一个本地存储的对您正在使用的函数的引用，以便您可以传递相同的引用以进行添加和删除。有很多方法可以做到这一点，但由于这是面向对象的代码，您需要将引用存储在对象本身中，以便每个对象都有自己的引用。

这是一种方法：

'use strict'
class Mouser {
  constructor () {
    this.counter = 0
    this.clicked = function (event) {
      this.counter ++
      console.log('clicks:', this.counter)
      if (this.counter >= 10) this.remove()
    }
    // save the click handler so it can be used in multiple places
    this.clickHandler = this.clicked.bind(this);
    window.addEventListener('click', this.clickHandler)
  }

  remove () {
    console.log('Removing click listener') // this line runs ..
    window.removeEventListener('click', this.clickHandler)
  }
}

var mouse = new Mouser()

javascript removeEventListener不在类中工作

1 个答案: