0 Replies Latest reply on Jun 9, 2014 9:13 AM by LordMysterious

    HTML5 Canvas: Removing EventListeners

    LordMysterious Level 1

      Hey guys

       

      I'm working on a project using the HTML5 canvas - quite simply, I have a 5x5 grid of squares that disappear when you click on them.

       

      Adding the listeners is fairly straightforward, I'm using the following code:

       

      var begin = addEventListeners.bind(this);

      var finish = removeEventListeners.bind(this);

       

      function addEventListeners()

      {

        for (var i = 1; i < 26; i++)

        {

        this["square"+i].addEventListener('click', squareClicked.bind(this["square"+i]));

        }

      }

      begin();

       

      This works just fine, there's a function called squareClicked that hides the square.

       

      The problem comes when I try to remove a listener, I've tried this:

       

      function removeEventListeners()

      {

        for (var i = 1; i < 26; i++)

        {

        this["square"+i].removeEventListener("click", squareClicked.bind(this["square"+i]));

        }

      }

       

      But no luck at all, I'm stumped, how would I go about doing this?

       

      Thanks