16 Replies Latest reply on Aug 25, 2017 6:13 AM by kglad

    [canvas] How do I use removeEventListener, properly?

    dominicc37295994

      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

        • 1. Re: [canvas] How do I use removeEventListener, properly?
          kglad Adobe Community Professional & MVP

          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.

          1 person found this helpful
          • 2. Re: [canvas] How do I use removeEventListener, properly?
            dominicc37295994 Level 1

            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

            • 3. Re: [canvas] How do I use removeEventListener, properly?
              kglad Adobe Community Professional & MVP

              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.

              1 person found this helpful
              • 4. Re: [canvas] How do I use removeEventListener, properly?
                dominicc37295994 Level 1

                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

                • 5. Re: [canvas] How do I use removeEventListener, properly?
                  kglad Adobe Community Professional & MVP

                  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.

                  1 person found this helpful
                  • 6. Re: [canvas] How do I use removeEventListener, properly?
                    dominicc37295994 Level 1

                    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

                    • 7. Re: [canvas] How do I use removeEventListener, properly?
                      kglad Adobe Community Professional & MVP

                      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.

                      2 people found this helpful
                      • 8. Re: [canvas] How do I use removeEventListener, properly?
                        ClayUUID Adobe Community Professional

                        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");

                        1 person found this helpful
                        • 9. Re: [canvas] How do I use removeEventListener, properly?
                          dominicc37295994 Level 1

                          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

                          • 10. Re: [canvas] How do I use removeEventListener, properly?
                            kglad Adobe Community Professional & MVP

                            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.

                            • 11. Re: [canvas] How do I use removeEventListener, properly?
                              ClayUUID Adobe Community Professional

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

                              1 person found this helpful
                              • 12. Re: [canvas] How do I use removeEventListener, properly?
                                kglad Adobe Community Professional & MVP

                                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

                                }

                                • 13. Re: [canvas] How do I use removeEventListener, properly?
                                  dominicc37295994 Level 1

                                  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

                                  • 14. Re: [canvas] How do I use removeEventListener, properly?
                                    kglad Adobe Community Professional & MVP

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

                                     

                                    keyZero, keyOne etc

                                     

                                    to

                                     

                                    key0, key1 etc

                                    1 person found this helpful
                                    • 15. Re: [canvas] How do I use removeEventListener, properly?
                                      dominicc37295994 Level 1

                                      ...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

                                      • 16. Re: [canvas] How do I use removeEventListener, properly?
                                        kglad Adobe Community Professional & MVP

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