Animate Html5 Canvas - Event Listeners Firing More Than Once?

So I am incredibly new to javascript (and coding in general), and I have managed to make an incredibly basic HTML5 canvas in Animate CC. Only problem is, when I move back to the pr

Solution 1:

I managed to solve this!

The AS3 post suggested to remove the event listeners, but I couldn't figure out what the JS equivalent was, but now I know!

instance.stop();
//MAKE SURE ALL BUTTONS ARE EVENT LISTENERS
instance.messageBTN.addEventListener("click", messageTest);
function messageTest(){
    console.log("Button Pressed");
}

instance.nextBTN.addEventListener("click", nextFrame);
function nextFrame(){
instance.gotoAndStop(1);
//ADD IN TO REMOVE THE EVENT LISTENER WHEN MOVING TO ANOTHER FRAME
instance.messageBTN.removeEventListener("click", messageTest);
}

Solution 2:

Make a variable:

var eventLisBool = false;

Surround your code within the listener with:

if (!eventLisBool) {
// code...// and at the end of your listener code, include this:
eventLisBool = true;
}

Solution 3:

In HTML5 Canvas there is no nextFrame() or PrevFrame() like in Flash. You just need to create a variable and increase the number for each click:

this.stop()
var _this = this;
    var frame = newNumber(0);

    _this.next_btn.on('click', function(){
    /*
    Can be used on the main timeline or on movie clip timelines.
    */
    frame++;
    _this.myMovieClip_mc.mySubMovie_mc.gotoAndStop(frame);

    });

    _this.prev_btn.on('click', function(){
    /*
    Can be used on the main timeline or on movie clip timelines.
    */
    frame--;
    _this.myMovieClip_mc.mySubMovie_mc.gotoAndStop(frame);

    });

but you must put any logic condition to control your variable or functions otherwise it will decrease/increase limited frame number