Search code examples
javascripthtml5-canvascreatejsanimate-cc

event listeners ever multiplying fires in CreateJS / Animate CC in the HTML5 Canvas


Animate CC, HTML5 Canvas. I have an animation with several clickthrough exits, to twitter, facebook etc. The animation has a repeat button. On the first play-through when I click the twitter exit just one twitter page opens, on the 2nd play through I click the same exit button and it opens TWO twitter pages, (and so on ad-infinitum. If I clicked repeat 50 times if would open 50 twitter pages :) ).

Here's one code snippet from frame 342:

root.twBtn.addEventListener("click", fl_MouseOverHandler_2.bind(this));

var frequency = 3;
stage.enableMouseOver(frequency);

function fl_MouseOverHandler_2(){
    window.open(clickTag1, "_blank");
}

I tried removing the event listener (in the replay function) on that same frame, and I'm still getting the same thing happening, this +1 of windows opening each time clicktag1 etc is fired after replaying the ad. How can I fix this? I'm not sure if the event listener is actually being removed, or what is happening.

// Replay
root.reBtn.on("click", function(evt){
    root.twBtn.removeEventListener("click", fl_MouseOverHandler_2);
    root.gotoAndPlay("start");
});

Basically my listeners are firing +1 times each time I replay the animation. I tried the solution here and it didn't work in my situation. How can I fix this?


Solution

  • Ok I solved it.

    I added root.x = 1; on Animate CC Frame 1 (createjs's frame 0), the banner replays from Animate CC Frame 2 (createjs's frame 1) (so it never plays the frame root.x is originally defined in again), and I switched out the eventlistener code for the following, wrapped in an if statement testing root.x. It works for me.

    if (root.x === 1){
    root.twBtn.on("click", function(evt){
        window.open(clickTag1, "_blank");
        y=y+1;  
        })
    };