CODEWITHSUNDEEP
javascriptactionscript-3createjseaseljsanimate-cc
HungryBeagle
HungryBeagle

Reputation: 272

Animate / EaselJS - removeEventListener not working

I have an issue w/ Adobe Animate CC, and the Javascript framework it uses, EaselJS/CreateJS. I can add event listeners w/o issue, but I cannot remove them. I have tried various things from the debugger, including stepping into their JS removeEventListener handler - Although the two variables look identical, they are never == (or ===) so the even listener isn't removed.

Here is the code I use, and it's purpose it to fade-in an element when hovering over it:

this.fadeIn = function(target_mc)
    {
        target_mc.alpha = 0;
        target_mc.visible = true;

        target_mc.removeEventListener("tick",fadeIn_onEnterFrame);
        target_mc.addEventListener("tick",fadeIn_onEnterFrame.bind(this));

        function fadeIn_onEnterFrame(evt)
        {
            evt.currentTarget.alpha = evt.currentTarget.alpha + .2;
            if (evt.currentTarget.alpha >= 1)
            {
                evt.currentTarget.removeEventListener("tick",fadeIn_onEnterFrame);
            } // end if
        }
    } // End of the function

So you know, it is added to the Canvas in frame_0, and is called from a "mouseover" listener added to each clothing type (it's for a drag-and-drop dress-up game, FWIW)

function clothing_onRollOver()
{
    this.hint_mc.desc_mc.desc1_txt.text = this.articleName;
    this.fadeIn(this.hint_mc);
    this.clothingOver = true;
};
clothing.addEventListener("mouseover",clothing_onRollOver.bind(this));

Upvotes: 2

Views: 2021

Answers (1)

Zze
Zze

Reputation: 18805

There seems to be some scoping issue with your code. The snippet below fixes your issue and correctly removes the event listener, however I have no idea why your current implementation was not working correctly.

The difference is that I have removed the bind from target_mc.addEventListener("tick",fadeIn_onEnterFrame.bind(this));

However I am unsure as to why .bind() was causing this issue.

stage.enableMouseOver();

clothingOver = false;

this.hint_mc.visible = false;

this.fadeIn = function(target_mc)
{
    console.log(target_mc);

    target_mc.alpha = 0;
    target_mc.visible = true;

    target_mc.removeEventListener("tick",fadeIn_onEnterFrame);
    target_mc.addEventListener("tick",fadeIn_onEnterFrame);

    function fadeIn_onEnterFrame(evt)
    {
        console.log("tick");
        evt.currentTarget.alpha = evt.currentTarget.alpha + .2;

        if (evt.currentTarget.alpha >= 1)
        {
            evt.currentTarget.removeEventListener("tick", fadeIn_onEnterFrame);
        } // end if
    }
} // End of the function



function clothing_onRollOver()
{
    //this.hint_mc.desc_mc.desc1_txt.text = this.articleName;
    this.fadeIn(this.hint_mc);
    this.clothingOver = true;
};


this.clothing.addEventListener("mouseover",clothing_onRollOver.bind(this));

Sorry that I am not able to identify the exact root cause for you.

Upvotes: 2

Related Questions