After researching the issue, I have discovered that the onMouseUp event is being fired but it is not removing the EventListeners. Many individuals facing a similar problem fail to remove the same function they added initially. Upon reading information from this source, I suspect that I may be encountering the same issue. However, I am unsure how to address it as I find the explanation in the linked question somewhat confusing.
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));
}
}