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

[canvas] How do I use removeEventListener, properly?

Explorer ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

How to use removeEventListener is confusing the hell out of me or that my code is rather poorly made and therefore some sort of conflict going on.

I have a complicated project, made up of multiple on screen functions using an onscreen key pad to input numbers and text.

The problem being is when I press 'Enter' and get the error message for an incorrect input. When I then press the 'delete' key to remove the incorrect number(s) it takes out 4 numbers at a time. Then when I press a key for a new number input it puts 4 of the same number in, and each time I do this it goes up in fours.

There is a global var called "rootADAD = this" that is referenced earlier in the timeline, here is my code for this particular frame:

this.stop();

//

this.keyPad.visible = true;

this.keyPad.gotoAndStop(0); //resets the key pad MC to numbers

//Keypad Enter disable

this.keyPad.keyEnter.mouseEnabled = true;

//// ERROR POPUP /////

this.errorMsg.visible = false;

//-- FUNCTIONS

function errorMsgHide() {

rootADAD.errorMsg.visible = false;

//NAV removeEventListener

rootADAD.keyPad.keyNext.removeEventListener("click", navNext);

rootADAD.keyPad.keyPrev.removeEventListener("click", navPrev);

//NUMBERS removeEventListener

rootADAD.keyPad.keyOne.removeEventListener("click", buttonOne);

rootADAD.keyPad.keyTwo.removeEventListener("click", buttonTwo);

rootADAD.keyPad.keyThree.removeEventListener("click", buttonThree);

rootADAD.keyPad.keyFour.removeEventListener("click", buttonFour);

rootADAD.keyPad.keyFive.removeEventListener("click", buttonFive);

rootADAD.keyPad.keySix.removeEventListener("click", buttonSix);

rootADAD.keyPad.keySeven.removeEventListener("click", buttonSeven);

rootADAD.keyPad.keyEight.removeEventListener("click", buttonEight);

rootADAD.keyPad.keyNine.removeEventListener("click", buttonNine);

rootADAD.keyPad.keyZero.removeEventListener("click", buttonZero);

//LETTERS removeEventListener

rootADAD.keyPad.selectLetter.removeEventListener("click", selectLetterChoice);

//OTHER removeEventListener

rootADAD.keyPad.keyEnter.removeEventListener("click", buttonEnter);

rootADAD.keyPad.keyDelete.removeEventListener("click", buttonDelete);

rootADAD.keyPad.keyCancel.removeEventListener("click", buttonCancel);

}

//-- EVENTLISTENERS

this.errorMsg.addEventListener("click", errorMsgHide);

//// KEY PAD /////

//-- Variables Local

var priorityLineEntry = rootADAD.priorityLine.priorityLineTxt;

var letterChoice = rootADAD.keyPad.letterOption;

//-- Functions

function buttonOne() {

rootADAD.priorityLine.priorityLineTxt.text += "1";

}

function buttonTwo() {

rootADAD.priorityLine.priorityLineTxt.text += "2";

}

function buttonThree() {

rootADAD.priorityLine.priorityLineTxt.text += "3";

}

function buttonFour() {

rootADAD.priorityLine.priorityLineTxt.text += "4";

}

function buttonFive() {

rootADAD.priorityLine.priorityLineTxt.text += "5";

}

function buttonSix() {

rootADAD.priorityLine.priorityLineTxt.text += "6";

}

function buttonSeven() {

rootADAD.priorityLine.priorityLineTxt.text += "7";

}

function buttonEight() {

rootADAD.priorityLine.priorityLineTxt.text += "8";

}

function buttonNine() {

rootADAD.priorityLine.priorityLineTxt.text += "9";

}

function buttonZero() {

rootADAD.priorityLine.priorityLineTxt.text += "0";

}

//LETTERS

function selectLetterChoice (){

rootADAD.priorityLine.priorityLineTxt.text += letterChoice.text;

}

//OTHER BUTTONS

function buttonEnter() {

if (priorityLineEntry.text === "800"){

rootADAD.play();

}else{

rootADAD.errorMsg.visible = true;

}

}

function buttonDelete() {

rootADAD.priorityLine.priorityLineTxt.text = rootADAD.priorityLine.priorityLineTxt.text.slice(0, -1);

}

function buttonCancel() {

rootADAD.priorityLine.priorityLineTxt.text = "";

}

//-- Event Listeners

//NUMBERS

this.keyPad.keyOne.addEventListener("click", buttonOne);

this.keyPad.keyTwo.addEventListener("click", buttonTwo);

this.keyPad.keyThree.addEventListener("click", buttonThree);

this.keyPad.keyFour.addEventListener("click", buttonFour);

this.keyPad.keyFive.addEventListener("click", buttonFive);

this.keyPad.keySix.addEventListener("click", buttonSix);

this.keyPad.keySeven.addEventListener("click", buttonSeven);

this.keyPad.keyEight.addEventListener("click", buttonEight);

this.keyPad.keyNine.addEventListener("click", buttonNine);

this.keyPad.keyZero.addEventListener("click", buttonZero);

//LETTERS

this.keyPad.selectLetter.addEventListener("click", selectLetterChoice);

//OTHER

this.keyPad.keyEnter.addEventListener("click", buttonEnter);

this.keyPad.keyDelete.addEventListener("click", buttonDelete);

this.keyPad.keyCancel.addEventListener("click", buttonCancel);

//--Fade up Prompt

var prompt_PriorityLine_FadeInCbk = fl_FadeSymbolIn_2.bind(this);

this.addEventListener('tick', prompt_PriorityLine_FadeInCbk);

this.prompt_PriorityLine.alpha = 0;

function fl_FadeSymbolIn_2()

{

this.prompt_PriorityLine.alpha += 0.01;

if(this.prompt_PriorityLine.alpha >= 1)

{

this.removeEventListener('tick', prompt_PriorityLine_FadeInCbk);

}

}

There is nothing more beyond line 112 as it's a generic code snippet for a fade.

From line 12 I've put my removeEventListeners, as anywhere else they seem to mess with the timeline previous to this particular frame. The keypad is used about 15 times at different frames along the time line and for other inputs.

the frustrating part, I used them(removeEventListeners) on a similar frame earlier and saved as a separate project, and it worked. However, my removeEventListeners were under a button control to take the user to the next frame.

Did that make sense? I'm UK based in case of delays with my responses. Thank you.

Dom

Views

1.5K

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

Community Expert , Aug 23, 2017 Aug 23, 2017

checking for the event listener before adding should fix the problem.  but it's not clear why you're even trying to repeatedly add the listener and repeatedly defining buttonOne() etc.  you're over-complicating your project.

you only need to add the listener once and define the functions once in the first keyframe that contains keyPad.  on that layer that contains keyPad there should be no other keyframes.  if you don't want keyPad to appear on some frames and reappear on others, use its visible

...

Votes

Translate

Translate
Community Expert ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

if you have difficulty controlling your listeners, use hasEventListener():

if(!rootADAD.keyPad.keyOne.hasEventListener('click')){

rootADAD.keyPad.keyOne.addEventListener('click'),buttonOne;

}

but you probably have more extensive problems with code you're not showing.

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 ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

thanks you for that, I'll certainly try hasEventListener() out. But as you say, my code in the previous frames could be having an effect.When I view in developer tools mode on my browser and go through the frames

When I view in developer tools mode on my Opera browser and go through the frames all is ok until I do my 'deliberate' mistake on the number input to trigger the error message. Upon pressing the error message to hide it I get these alerts in the console:

TCC_emulation_v6-2_ADAD.js?1503407559197:21875

Uncaught ReferenceError: navNext is not defined

    at errorMsgHide (TCC_emulation_v6-2_ADAD.js?1503407559197:21875)

    at lib.ERRORMsg.b._dispatchEvent (createjs-2015.11.26.min.js:12)

    at a.b.dispatchEvent (createjs-2015.11.26.min.js:12)

    at lib.Stage.b._dispatchMouseEvent (createjs-2015.11.26.min.js:13)

    at lib.Stage.b._handlePointerUp (createjs-2015.11.26.min.js:13)

    at lib.Stage.b._handleMouseUp (createjs-2015.11.26.min.js:13)

    at f (createjs-2015.11.26.min.js:13)

I'm unable to fathom what this means for now. Anyway, I'll crack on with your suggestion, thank you for that.

Dom

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
Community Expert ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

open your js file in a text editor.

line 21845 is referencing navNext instead of this.navNext or rootADAD.navNext or something similar.

from the surrounding lines of code you can see what frame contains the code and where it's located in your project so you can fix that.

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 ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

thanks for interpreting that the console error, that bit fixed now, so the error doesn't come up. I've still yet to try the original help idea.

for the benefit of others, i added rootADAD. to navNext, and susequently all the rest of my removeEventListeners.

rootADAD.keyPad.keyNext.removeEventListener("click", rootADAD.navNext);

thanks

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
Community Expert ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

checking for the event listener before adding should fix the problem.  but it's not clear why you're even trying to repeatedly add the listener and repeatedly defining buttonOne() etc.  you're over-complicating your project.

you only need to add the listener once and define the functions once in the first keyframe that contains keyPad.  on that layer that contains keyPad there should be no other keyframes.  if you don't want keyPad to appear on some frames and reappear on others, use its visible property.  if you want to change its size/location/etc, also use js code.

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 ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

so my repeated adding the same eventListener(s) through out my timeline is a likely cause for my problem?

my logic for adding the listener to each frame that there was a change in scenario was when I needed the 'enter' button to do or go somewhere different.

The keypad is on its own layer and is from frame 1 but is invisible until needed further down the timeline. below is a screen shot of frame 110 of my project to show what I'm talking about

thanks for the help, all comments are seriously taken on board.

Dom

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
Community Expert ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

as long as you're not making your keyPad invisible by removing it from the timeline, it's ok.  if you ever removed it from the timeline and then replaced it, there could be a problem.

if you want buttons (enter or anything else) to do one thing on frame A and something else on frame B, remove the listener when you exit frame A and add another listener on frame B.

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
LEGEND ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

To answer the original question, your removeEventListeners don't work when moved into other clips because they have no idea what buttonOne, buttonTwo, etc are. Functions declared via the function statement are scoped to only the code in the frame where they're declared. To make a function visible to an entire movieclip, you define it like this instead:

this.buttonOne = function() {

     // yadda yadda

}

That being said, you can just use removeAllEventListeners() instead. Now, if you use this on a button with no arguments it will break the button, because the rollover event listeners will be removed as well. However, you can safely use it on a button by specifying the type of listeners you want removed. So this would work fine:

rootADAD.keyPad.keyOne.removeAllEventListeners("click");

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 ,
Aug 24, 2017 Aug 24, 2017

Copy link to clipboard

Copied

I have tried all kinds of the above suggestions for which I am grateful for the time spent answering my query. But it is quite probable I'm implementing them incorrectly, and I still have the same problem with my dynamic text field not behaving as I would expect after 'Enter' is pressed, so perhaps my original question about  removeEventListeners was wrong.

This is the frame and with the error message red box shown (otherwise hidden until triggered by an incorrect input)

6-3_ADAD_config.jpg

So upon landing on this frame, the user is prompted to input numbers/characters that will populate the green outline Priority Line box (a dynamic text field). They can press 'delete' and remove a number/character on each press or 'Cancel' to empty the dynamic text field.However, once 'Enter' is pressed and if correct it goes on to the next keyframe, but if wrong, the error message pops up. From which point, when 'Delete' is pressed it no longer removes each character, it takes out up to 4 and when a number is pressed it puts in 4 of the same number in. This seems to multiply a lot should I come out of this keyframe and back again later. 

However, once 'Enter' is pressed and if correct, it goes on to the next keyframe, but if wrong, the error message pops up. From which point, when 'Delete' is pressed it no longer removes each character singularly, but it takes out up to 4 and when a number is pressed it puts in 4 of the same number in. This strangely seems to multiply a lot should I come out of this keyframe and back again later. 

Here is the code again, without removeEventListeners, because I still don't know what I'm doing...

this.stop();

//

this.keyPad.visible = true;

this.keyPad.gotoAndStop(0); //resets the key pad MC to numbers

//Keypad Enter disable

this.keyPad.keyEnter.mouseEnabled = true;

//// ERROR POPUP /////

this.errorMsg.visible = false;

//-- FUNCTIONS

function errorMsgHide() {

rootADAD.errorMsg.visible = false;

}

//-- EVENTLISTENERS

this.errorMsg.addEventListener("click", errorMsgHide.bind(this));

//// KEY PAD /////

//-- Variables Local

var priorityLineEntry = rootADAD.priorityLine.priorityLineTxt;

var letterChoice = rootADAD.keyPad.letterOption;

//-- Functions

function buttonOne() {

rootADAD.priorityLine.priorityLineTxt.text += "1";

}

function buttonTwo() {

rootADAD.priorityLine.priorityLineTxt.text += "2";

}

function buttonThree() {

rootADAD.priorityLine.priorityLineTxt.text += "3";

}

function buttonFour() {

rootADAD.priorityLine.priorityLineTxt.text += "4";

}

function buttonFive() {

rootADAD.priorityLine.priorityLineTxt.text += "5";

}

function buttonSix() {

rootADAD.priorityLine.priorityLineTxt.text += "6";

}

function buttonSeven() {

rootADAD.priorityLine.priorityLineTxt.text += "7";

}

function buttonEight() {

rootADAD.priorityLine.priorityLineTxt.text += "8";

}

function buttonNine() {

rootADAD.priorityLine.priorityLineTxt.text += "9";

}

function buttonZero() {

rootADAD.priorityLine.priorityLineTxt.text += "0";

}

//LETTERS

function selectLetterChoice (){

rootADAD.priorityLine.priorityLineTxt.text += letterChoice.text;

}

//OTHER BUTTONS

function buttonEnter() {

if (priorityLineEntry.text === "800"){

rootADAD.play();

}else{

rootADAD.errorMsg.visible = true;

}

}

function buttonDelete() {

rootADAD.priorityLine.priorityLineTxt.text = rootADAD.priorityLine.priorityLineTxt.text.slice(0, -1);

}

function buttonCancel() {

rootADAD.priorityLine.priorityLineTxt.text = "";

}

//-- Event Listeners

//NUMBERS

this.keyPad.keyOne.addEventListener("click", buttonOne);

this.keyPad.keyTwo.addEventListener("click", buttonTwo);

this.keyPad.keyThree.addEventListener("click", buttonThree);

this.keyPad.keyFour.addEventListener("click", buttonFour);

this.keyPad.keyFive.addEventListener("click", buttonFive);

this.keyPad.keySix.addEventListener("click", buttonSix);

this.keyPad.keySeven.addEventListener("click", buttonSeven);

this.keyPad.keyEight.addEventListener("click", buttonEight);

this.keyPad.keyNine.addEventListener("click", buttonNine);

this.keyPad.keyZero.addEventListener("click", buttonZero);

//LETTERS

this.keyPad.selectLetter.addEventListener("click", selectLetterChoice);

//OTHER

this.keyPad.keyEnter.addEventListener("click", buttonEnter);

this.keyPad.keyDelete.addEventListener("click", buttonDelete);

this.keyPad.keyCancel.addEventListener("click", buttonCancel);

Again, I am grateful any help or guidance to help me fix this.

Thank you

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
Community Expert ,
Aug 24, 2017 Aug 24, 2017

Copy link to clipboard

Copied

i don't see any problem with that.  to confirm the problem is not shown in that code:

create a new canvas project with that code and your keypad, textfield and error message movieclip and test.

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
Community Expert ,
Aug 24, 2017 Aug 24, 2017

Copy link to clipboard

Copied

clay's right.  you can simplify all that keyboard numbercode with

function buttonF(e) {

    rootADAD.priorityLine.priorityLineTxt.text += e.currentTarget.ivar;

}

for (var i = 0; i < 10; i++) {

    this.keyPad['key' + i].addEventListener("click", buttonF);

    this.keyPad['key' + i].ivar = i

}

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 ,
Aug 25, 2017 Aug 25, 2017

Copy link to clipboard

Copied

Just done that, and yes, that screen/keyframe works as I would like it. So it is obviously something elsewhere in my timeline causing this problem/fault.

The simplified code... well I'm just gob-smacked you can do that. I have a feeling someone enjoyed themselves writing that! You could attempt to explain it to me, but I doubt I'd understand, really.

Anyhow, I tried it out on my single frame test but only the keyPad was visible and the rest of the graphics didn't display and I got this error in the console:

TCC_emulation_v6-3_ADAD_priorityLine.js?1503651449775:5095 Uncaught TypeError: Cannot read property 'addEventListener' of undefined

    at lib.TCC_emulation_v63_ADAD_priorityLine.frame_0 (TCC_emulation_v6-3_ADAD_priorityLine.js?1503651449775:5095)

    at a.b._runActions (createjs-2015.11.26.min.js:17)

    at a.b.setPosition (createjs-2015.11.26.min.js:17)

    at a.b.setPosition (createjs-2015.11.26.min.js:17)

    at lib.TCC_emulation_v63_ADAD_priorityLine.c._updateTimeline (createjs-2015.11.26.min.js:14)

    at lib.TCC_emulation_v63_ADAD_priorityLine.c.advance (createjs-2015.11.26.min.js:14)

    at lib.TCC_emulation_v63_ADAD_priorityLine.c._tick (createjs-2015.11.26.min.js:14)

    at lib.Stage.b._tick (createjs-2015.11.26.min.js:13)

    at lib.Stage.b.tick (createjs-2015.11.26.min.js:13)

    at lib.Stage.b.update (createjs-2015.11.26.min.js:13)andt

and when I clicked on the .js link it was pointing at this line with a cursor flashing before the period of addEventListener:

this.keyPad['key'+i].addEventListener("click", buttonF);

If you allow more time to this thread and fix the above, that would be great, but again it is unlikely I'll understand what you did.

Thank you, for taking the time to help me.

Dom

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
Community Expert ,
Aug 25, 2017 Aug 25, 2017

Copy link to clipboard

Copied

you have to change the key instance names on keyPad's timeline from

keyZero, keyOne etc

to

key0, key1 etc

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 ,
Aug 25, 2017 Aug 25, 2017

Copy link to clipboard

Copied

...unbelievable! I had a feeling it was the instance names needing to be altered but had no idea what to.

Thanks very much for this, I find it mind-boggling that you can write code in that way.

with regards, Dom

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
Community Expert ,
Aug 25, 2017 Aug 25, 2017

Copy link to clipboard

Copied

LATEST

by prudently choosing instance names you can simplify code and make it easier to maintain and debug.

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
LEGEND ,
Aug 24, 2017 Aug 24, 2017

Copy link to clipboard

Copied

All those functions and clips named with spelled-out numbers instead of actual numbers is giving me a migraine.

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