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

Action 结束后，我无法删除事件。我通过单击以下命令来初始化事件:

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

最佳答案

您必须为removeEventListener指定与addEventListener相同的函数。 bind返回的函数与原始函数不同(如果存在，则将出现this问题)。

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

关于javascript - Angular 2 document.removeEventListener在类中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44738635/