javascript - 无法删除事件监听器 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

在您的代码中使用.bind。

问题

• .bind 创建函数的副本。

即foo.bind !== foo

• bind 类型不安全:https://basarat.gitbooks.io/typescript/content/docs/tips/bind.html

解决方案

使用箭头函数。我为 mousedown 为你做的:

class DragAndDrop {
    item: Item;
    documentBody: HTMLBodyElement;
    constructor(documentBody: HTMLBodyElement, item: Item) {
        this.documentBody = documentBody;
        this.item = item;
        this.documentBody.addEventListener("mousedown", this.onmousedown);
    }
    onmousedown = (event: MouseEvent): void => {
        if (CollisionDetector.pointInRect(event.clientX, event.clientY, this.item)) {
            // Similarly ...
        }
    }
}

更多

关于箭头函数的更多信息:https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html