• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to remove addEventListener when jumping between frames?

Explorer ,
Mar 17, 2022 Mar 17, 2022

Copy link to clipboard

Copied

Hi, I seem to have trouble removing addEventListeners when I jump between frames. When I jump back and forth, the addEventListeners still seem to stack up:

 

removeEvtList.gif

 

Frame 1 code:

this.stop();

this.arrowForward_btn.addEventListener("click", arrow_btnClickForward.bind(this));

function arrow_btnClickForward() {
	this.arrowForward_btn.removeEventListener("click", arrow_btnClickForward.bind(this));
	console.log("went forward");
	alert("alert: went forward!");
	this.gotoAndStop(1);
}

 

Frame 2 code:

this.arrowBack_btn.addEventListener("click", arrow_btnClickBack.bind(this));

function arrow_btnClickBack() {
	this.arrowBack_btn.removeEventListener("click", arrow_btnClickBack.bind(this));
	console.log("went back!");
	alert("alert: went back!");
	this.gotoAndStop(0);
}

 

How do I remove the addEventListeners so that they don't stack up?

TOPICS
Code , How to

Views

267

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Mar 17, 2022 Mar 17, 2022

.bind() returns a new, unique function reference every time it's called on a function, so of course you can't use it with removeEventListener().

 

Since you're attempting to remove the event inside its own event handler, you can use evt.remove()

https://www.createjs.com/docs/easeljs/classes/Event.html

 

Or, instead of using .addEventListener(), you could just use .on() with the once flag.

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

 

 

Votes

Translate

Translate
LEGEND ,
Mar 17, 2022 Mar 17, 2022

Copy link to clipboard

Copied

.bind() returns a new, unique function reference every time it's called on a function, so of course you can't use it with removeEventListener().

 

Since you're attempting to remove the event inside its own event handler, you can use evt.remove()

https://www.createjs.com/docs/easeljs/classes/Event.html

 

Or, instead of using .addEventListener(), you could just use .on() with the once flag.

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

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 17, 2022 Mar 17, 2022

Copy link to clipboard

Copied

LATEST

Thanks! evt.remove(); works great after I added it into the functions.

 

Frame 1 code:

this.stop();

this.arrowForward_btn.addEventListener("click", arrow_btnClickForward.bind(this));

function arrow_btnClickForward(evt) {
	console.log("went forward");
	alert("alert: went forward!");
	this.gotoAndStop(1);
	evt.remove();
}

Frame 2 code:

this.arrowBack_btn.addEventListener("click", arrow_btnClickBack.bind(this));

function arrow_btnClickBack(evt) {
	console.log("went back!");
	alert("alert: went back!");
	this.gotoAndStop(0);
	evt.remove();
}

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines