1

I'm trying to create an interactive HTML5 animation with Adobe Animate and I'm having an issue with my event listeners not being added or removed properly.

My intention is for the animation to always be listening for a mousedown event. When that fires, I want to listen for both mousemove and mouseup events. An object on the canvas will move with the cursor as mousemove fires and, when mouseup fires, the event listeners for both mousemove and mouseup are removed. However, the event listeners seem to persist. I've provided my code below; any help would be appreciated!

var canvas = document.getElementById('canvas');
canvas.addEventListener('mousedown', drag.bind(this));

function drag(event) {
    
    canvas.addEventListener('mousemove', dragging.bind(this));
    canvas.addEventListener('mouseup', stopDragging.bind(this));
    
    function dragging(event) {
        /* DRAG PROGRAM LOGIC */
    }
    
    function stopDragging(event) {
        canvas.removeEventListener('mousemove', null);
        canvas.removeEventListener('mouseup', null);
    }
}
Kohi
  • 11
  • 1

0 Answers0