HTML5 Canvas: How to disable stage.on("click", function(){...

[SSSSSSBenay]

Hello,

I am working with some already written code as part of a larger project which includes a main timeline with 10 frames, navigation arrows for the user to cycle forward and backward through those 10 frames, and nested movieclips with interactive elements on each main timeline frame. (Essentially, each main timeline frame is a new game.)
Anyways, some code in a game on frame 2 is causing issues with my games in later frames. I am working with previously written code (I am also a beginner to HTML5 Canvas with CreateJS) and I would like to remove the event listener from the stage, or disalbe this event in subsequent frames:

This is the code causing me issues:
stage.on("click", function(){
... //lots of things happening here
}

I would like to disable this stage event, or remove the event listener from the stage so that it does not interfere with later frames. I tried to rewrite the above like this:
stage.addEventListener("click", ThingsHappen);
function ThingsHappen() {
}

..and then remove it like this:
stage.removeEventListener("click", ThingsHappen);

But I am not having success. Is it possible to remove an .on event from the stage? or to add an EventListener to the actual stage? The original code [stage.on("click", function(){}] does do what it should in the frame in which it is called, however I need to remove it in order for some subsequent stage functions to work. Thank you!  Again, I am still learning as I go, so please be kind. Thank you in advance.

[JoãoCésar]

Hi.

According to the docs:

IMPORTANT: To remove a listener added with on, you must pass in the returned wrapper function as the listener.

https://www.createjs.com/docs/easeljs/classes/DisplayObject.html#method_off 

For example:

var root = this;

root.gotoFrame1 = function()
{
	console.log("gotoFrame1");
	stage.off("click", root.stageClick);
	root.gotoAndStop(1);
};

root.stop();
root.stageClick = stage.on("click", this.gotoFrame1, this);

Another technique I like to use is to create a flag that tells if the current frame has already been visited.

var root = this;

if (!root.frame0Started)
{
	root.gotoFrame1 = function()
	{
		console.log("gotoFrame1");
		root.gotoAndStop(1);
	};
	
	root.stop();
	stage.on("click", this.gotoFrame1, this);
	root.frame0Started = true;
}

In this way I can be sure that the code inside of the if statement will only run once in the program lifecycle unless I intentionally reset the root.frame0Started property to something that is not true.

Please let us know if you have any further questions.

Regards,

JC

[ClayUUID]

stage.removeAllEventListeners("click");

https://www.createjs.com/docs/easeljs/classes/EventDispatcher.html#method_removeAllEventListeners