删除 JavaScript 事件：为什么这个例子不起作用？

Question

我正在努力删除之前添加到 DOM 元素的 JavaScript 事件 element.addEventListener:

$(() => {
  var example = {
    init() {
      this.element = document.getElementById('foo');
      this.element.addEventListener('mousedown', this.start.bind(this));
    },
    start() {
      console.log('start');
      this.element.addEventListener('mouseup', this.stop.bind(this));
    },
    stop() {
      console.log('stop');
      this.element.removeEventListener('mouseup', this.stop);
    }
  };

  var bar = Object.create(example);
  bar.init();
});

Fiddle

单击元素并按住鼠标按钮时，会记录 'start'。一旦鼠标按钮被释放，'stop' 就会被记录下来。第一次按预期工作，但第二次 'stop' 被记录了两次，然后是三次，然后是四次......这意味着在 stop() 中，事件没有被正确删除.

我知道我必须将完全相同的实例传递给 removeEventListener 我传递给 addEventListener，但对我来说这在这种情况下似乎是正确的，所以我有点迷茫为什么这是'工作正常。

Answer 1

它不起作用，因为bind return这是一个新功能，与您原来的功能不同。您正在添加一个作为处理程序，但试图删除另一个。

您需要在某处存储 bind 的 return 值，并将其用于添加和删除事件处理程序。

删除 JavaScript 事件：为什么这个例子不起作用？

Removing a JavaScript event: Why is this example not working?

javascript

dom-events