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

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

本文关键字：不起作用 JavaScript 事件 为什么 删除      更新时间：2023-09-26

我正在努力删除一个JavaScript事件，该事件以前已添加到一个DOM元素与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();
});

小提琴

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

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

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

您需要存储某个地方的bind的返回值，并使用它来添加和删除事件处理程序。

相关文章：