Angular 2 document.removeEventListener在类中不起作用

Question

当动作结束时,我无法删除事件.我点击初始化事件:

<span class="leftTopPoint" (click)="initResize($event)"></span>

export class SectionComponent {
    ...

    initResize(e): void {
        this.mouseX = e.clientX;
        this.mouseY = e.clientY;

        document.addEventListener('mousemove', this.onResize.bind(this), false);
        document.addEventListener('mouseup', this.stopResize.bind(this), false);
    }
}

我使用.bind(this)然后指针这没关系,但是当我调用stopResize()的方法时,removeEventListener不起作用.方法onResize()仍然有效.

export class SectionComponent { ...
    stopResize(e): void {
        document.removeEventListener('mousemove', this.onResize, false);
        document.removeEventListener('mouseup', this.stopResize, false);
    }
}

Answer 1

你必须指定同样的功能来removeEventListener为您提供的addEventListener.返回的函数bind与原始函数不同(如果是,则会出现this问题).

因此,您必须存储绑定的函数并在调用时使用它们removeEventListener.

initResize(e): void {
    this.mouseX = e.clientX;
    this.mouseY = e.clientY;

    if (!this.onResizeBound) {
        this.onResizeBound = this.onResize.bind(this);
    }
    if (!this.stopResizeBound) {
        this.stopResizeBound = this.stopResize.bind(this);
    }

    document.addEventListener('mousemove', this.onResizeBound, false);
    document.addEventListener('mouseup', this.stopResizeBound, false);
}

和

stopResize(e): void {
    document.removeEventListener('mousemove', this.onResizeBound, false);
    document.removeEventListener('mouseup', this.stopResizeBound, false);
}

Answer 2

这是使用粗箭头函数的一种优雅的方式，几乎没有样板：

export class AppComponent {
  private classMember = 'aClassMember';

  // use the fat arrow to bind the event
  private eventListener = () => {
    console.log(this.classMember);
  };

  registerEvent() {
    this.htmlEl.addEventListener('click', this.eventListener);
  );

  unregisterEvent() {
    this.htmlEl.removeEventListener('click', this.eventListener);
  );
}

提示：

• 使用被动事件处理程序，除非您想调用 PreventDefaults
• 当您想避免事件触发 Angular 更改检测时，请使用runOutsideAngular()
• 完整的 stackblitz 示例