How can I fix or cancel the touchmove event when the element is removed? [Solved]

Question

I have the code below.
I added the events mousemove and touchmove to one(at a time) of the moving divs.
The goal is to find the right element and drag it to the circle at the bottom-left corner.

Now, the mousemove works just as I expected.
The element goes near the circle and then it gets removed. Another element is selected, the same events are added, and so on.

But, using the touchmove, if I do not get my finger up from the screen after the element is removed, the next selected element is suddenly dragged to the circle where it also gets removed, and the cycle continues until there are 0 elements left.

I searched on google but couldn't find a way to solve it and I have no idea what to do.

How do I force end of the touchmove? Or what are the alternative to avoid that bug?

[Code removed since the problem is solved]

Answer 1

Do you know about removeEventListener?

To remove an event from element you have to use that but you can't use it if you use anonymous event handler functions

Define them separately with a name and pass it to second argument of addEventListener

For example,
function onMoveHandler(e) {
//Do stuff
}

element.addEventListener('mousemove', onMoveHandler)

And then when you detect collision, right before you remove element from array or whatever you remove event listener

Answer 2

Oh, I didn't though at that. I suppose using a anonymous function made my code harder to understand, even for me. xD

Answer 3

هلا