How can I temporarily disable a javascript event listener I didn't add?

Question

I'm using Adobe Animate to create an HTML5 menu.

When you export a project, it adds a bunch of javascript to the resulting HTML file based on the settings you chose in Animate.

For my project, I need it to be responsive, so I check the Responsive setting in Adobe Animate. This adds code that looks like this to my resulting HTML file:

AdobeAn.makeResponsive(true,'both',false,1,[canvas,anim_container,dom_overlay_container]);
...
an.makeResponsive = function(isResp, respDim, isScale, scaleType, domContainers) {
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();
    function resizeCanvas() {
        // Code to resize the canvas
    }
    ...
}

So it's basically adding an event listener to the window object for the 'resize' event. What I want to do is have the ability to disable the responsiveness at runtime.

It seems like that would be easy to do with something like:

window.removeEventListener('resize', resizeCanvas);

and re-add it with:

window.addEventListener('resize', resizeCanvas);

but the problem is that my code, which follows all the adobe code, doesn't have a reference to the resizeCanvas function. Apparently, without a reference to it, it's not possible to remove the event listener from window, or to even list the event listeners currently attached to window.

I could manually modify the code that Adobe generates, and add a global variable with a reference to resizeCanvas that I can use, but if I do that, then every single time I make a change to my Adobe Animate project, and publish (generate the output html), I'll need to go in and modify that code, by hand, in the resulting file, which is impractical. Even if I make a script that does this, Adobe Animate doesn't have a way to run a script on Publish, so I'll have to remember to run it every single time I publish.

Is there any way for me to either remove the resize listener from window without having a reference to resizeCanvas, or to somehow list the event listeners attached to window so I can get a reference to resizeCanvas?

Failing that, are there any other JS tricks I can use to make this work?

I can add JS code before Adobe's code, or after, (because I can modify the HTML template that's used to generate the resulting file) but not modify their code directly.

Event listeners are destroyed when the elements that they are attached to are destroyed. So you could copy the html into a variable, remove the html from the page, and then add the html back into the page. This would get rid of all event listeners that were attached to it. — kloddant, Jul 16 '20 at 22:14
Sorry - I don't follow. In this case, the event listener is attached to the `window` element. You want me to make a backup of, and delete the `window` element? Even if that's possible, I don't see a way to restore the event listener when I need it active again. — John, Jul 16 '20 at 22:21
Ah, sorry, I missed that point. No, if they are attached to the window element, then my solution does not work. Nevermind. — kloddant, Jul 20 '20 at 14:22

score 0 · Answer 1 · answered Jul 16 '20 at 22:39

The problem is you do not have a reference to the resizeCanvas function, it is defined inside the closure of the makeResponsive function.

This answer here How to find event listeners on a DOM node when debugging or from the JavaScript code? does give a away of hacking into the add addEventListener method that creates a way of access the events.

Smells a bit funky to me but might give you what you want.

How can I temporarily disable a javascript event listener I didn't add?

1 Answers1