无法删除eventlisteners TypeScript / OOP JavaScript

Question

onMouseUp被触发，但它不会删除EventListeners。我已经阅读了很多关于人们遇到麻烦的帖子，这是因为他们没有删除他们添加的相同功能，并且阅读this我认为我可能会遇到同样的问题，但是如何我会处理它吗？我不完全理解相关问题的答案。

class DragAndDrop {
    item: Item;
    documentBody: HTMLBodyElement;
    constructor(documentBody: HTMLBodyElement, item: Item) {
        this.documentBody = documentBody;
        this.item = item;
        this.documentBody.addEventListener("mousedown", this.onmousedown.bind(this));
    }
    onmousedown(event: MouseEvent): void {
        if (CollisionDetector.pointInRect(event.clientX, event.clientY, this.item)) {
            this.documentBody.addEventListener("mousemove", this.onMouseMove.bind(this));
            this.documentBody.addEventListener("mouseup", this.onMouseUp.bind(this));
        }
    }
    onMouseMove(event: MouseEvent): void {
        this.item.x = event.clientX;
        this.item.y = event.clientY;
    }
    onMouseUp(event: MouseEvent): void {
        this.documentBody.removeEventListener("mousemove", this.onMouseMove.bind(this));
        this.documentBody.removeEventListener("mouseup", this.onMouseUp.bind(this));
    }
}

Answer 1

在您的代码中，您使用.css('background-color', newcolor);。

问题

• .bind 会创建该功能的副本。

即。 .bind

• foo.bind !== foo不是类型安全的：https://basarat.gitbooks.io/typescript/content/docs/tips/bind.html

解决方案

使用箭头功能。我为你bind做了这件事：

mousedown

更多

有关箭头功能的更多信息：https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html