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

操作结束时我无法删除事件。我通过单击启动事件：

<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);
    }
}

I used .bind(这个)进而指针这个没问题，但是当我调用 stopResize() 方法时，removeEventListener 不起作用。方法 onResize() 仍然有效。

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

您必须指定相同的功能 to removeEventListener正如你提供给addEventListener。返回的函数bind与原始函数不同（如果是，它会有this issue).

因此，您必须存储绑定的函数并在调用时使用它们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);
}

and

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