Question

我正在努力删除先前已添加到带有element.addEventListener的DOM元素的JavaScript事件：

$(() => {
  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

点击元素并按住鼠标按钮时，开始＆＃39;已记录。一旦鼠标按钮被释放，停止＆＃39;已记录。这是第一次按预期工作，但第二次＃stop;＆＃39;记录两次，然后记录三次，然后记录四次......这意味着在stop()中，事件未被正确删除。

我知道我必须将完全相同的实例传递给removeEventListener我传递给addEventListener，但对我来说这似乎是正确的，所以我有点迷失为什么这不是＆＃39 ;工作正常。

Answer 1

它不起作用，因为bind返回一个与原始函数不同的新函数。你正在添加一个作为处理程序，但试图删除另一个。

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

删除JavaScript事件：为什么此示例不起作用？

1 个答案: