javascript - 调整大小后删除事件监听器

Question

调整浏览器大小后，我需要删除事件监听器。我尝试过这样的事情:

  window.addEventListener('resize', () => {
      const bp = this.breakpointInit.getValue();

      if (bp === 'mobile') {
        this.toggleMobile();
      } else {
        this.toggleDesktop();
      }
    });
  }

  toggleMobile() {
    Array.prototype.forEach.call(this.elements, (el) => {
      const activeClass = `${el.classList[0]}--active`;

      el.addEventListener('touchstart', (e) => {
        this.switchClass(e, el, activeClass);
      });

      el.removeEventListener('mouseenter', (e) => {
        this.switchClass(e, el, activeClass);
      });

      el.removeEventListener('mouseleave', (e) => {
        this.switchClass(e, el, activeClass);
      });
    });
  }

  toggleDesktop() {
    Array.prototype.forEach.call(this.elements, (el) => {
      const activeClass = `${el.classList[0]}--active`;

      el.addEventListener('click', (e) => {
        this.switchClass(e, el, activeClass);
      });

      el.addEventListener('mouseenter', (e) => {
        this.switchClass(e, el, activeClass);
      });

      el.addEventListener('mouseleave', (e) => {
        this.switchClass(e, el, activeClass);
      });

      el.removeEventListener('touchstart', (e) => {
        this.switchClass(e, el, activeClass);
      });
    });
  }

上述函数会在需要时触发，但事件监听器会被保留。我做错了什么？

Answer 1

您正在分配匿名函数，该函数实际上无法删除。

尝试这样的事情:

let me = this;

//this probably won't work exactly as-is, but you should get the idea
touchStartHandler(e) {
    me.switchClass(e, el, activeClass);
}

el.addEventListener('touchstart', touchStartHandler);

//...

el.removeEventListener('touchstart', touchStartHandler);

拥有一个命名函数可以让您随时添加和删除内容，因为您拥有对原始处理函数的引用。