JavaScript: enlever l'écouteur d'événement

Question

Je suis en train de supprimer un écouteur d'événement à l'intérieur d'un auditeur définition:

canvas.addEventListener('click', function(event) {
    click++;
    if(click == 50) {
        // remove this event listener here!
    }
// More code here ...

Comment pourrais-je le faire? ce = événement... Je vous remercie.

Answer 1

Vous avez besoin d'utiliser des fonctions nommées.

Aussi, l' click variable doit être à l'extérieur de la gestionnaire de l'incrémenter.

var click_count = 0;

function myClick(event) {
    click_count++;
    if(click_count == 50) {
       // to remove
       canvas.removeEventListener('click', myClick);
    }
}

// to add
canvas.addEventListener('click', myClick);

---

EDIT: Vous pourriez fermer autour de l' click_counter variable comme ceci:

var myClick = (function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           // to remove
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
})( 0 );

// to add
canvas.addEventListener('click', myClick);

De cette façon, vous pouvez incrémenter le compteur à travers plusieurs éléments.

---

Si vous ne voulez pas cela, et que vous voulez à chacun de disposer de son propre compteur, puis faire ceci:

var myClick = function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           // to remove
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
};

// to add
canvas.addEventListener('click', myClick( 0 ));

EDIT: j'avais oublié de nommer le gestionnaire être retournés dans les deux dernières versions. Fixe.

Answer 2

   canvas.addEventListener('click', function(event) {
      click++;
      if(click == 50) {
          this.removeEventListener('click',arguments.callee,false);
      }

Vous devriez le faire.

Answer 3

Vous pouvez utiliser une fonction nommée expression (dans ce cas, la fonction est nommée "a"), comme suit:

canvas.addEventListener('click', function a(event) {
    click++;
    if (click >= 50) {
        // remove event listener
        canvas.removeEventListener('click', a);
    }
    // More code here ...
}

Rapide et sale de travail exemple: http://jsfiddle.net/WqpfZ/1/.

Plus d'informations sur la fonction nommée expressions: http://kangax.github.io/nfe/.

Answer 4

Si @Cybernate la solution ne fonctionne pas, essayez de briser le déclencher à elle, la fonction de sorte que vous pouvez y faire référence.

clickHandler = function(event){
  if (click++ == 49)
    canvas.removeEventListener('click',clickHandler);
}
canvas.addEventListener('click',clickHandler);

Answer 5

element.querySelector('.addDoor').onEvent('click', function (e) { });
element.querySelector('.addDoor').removeListeners();


HTMLElement.prototype.onEvent = function (eventType, callBack, useCapture) {
this.addEventListener(eventType, callBack, useCapture);
if (!this.myListeners) {
    this.myListeners = [];
};
this.myListeners.push({ eType: eventType, callBack: callBack });
return this;
};


HTMLElement.prototype.removeListeners = function () {
if (this.myListeners) {
    for (var i = 0; i < this.myListeners.length; i++) {
        this.removeEventListener(this.myListeners[i].eType, this.myListeners[i].callBack);
    };
   delete this.myListeners;
};
};