JavaScript: rimuovere il listener di eventi

Sto cercando di rimuovere un listener di eventi all’interno di una definizione listener:

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

Come potrei farlo? questo = evento … Grazie.

È necessario utilizzare le funzioni con nome.

Inoltre, la variabile click deve essere al di fuori del gestore per incrementare.

 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: puoi chiudere la variabile click_counter questo modo:

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

In questo modo è ansible incrementare il contatore su più elementi.


Se non lo vuoi, e vuoi che ognuno abbia il proprio contatore, allora fai questo:

 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: avevo dimenticato di chiamare il gestore che viene restituito nelle ultime due versioni. Fisso.

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

Dovrebbe farlo

È ansible utilizzare un’espressione di funzione con nome (in questo caso la funzione è denominata a ), in questo modo:

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

Esempio di lavoro rapido e sporco: http://jsfiddle.net/WqpfZ/1/ .

Ulteriori informazioni sulle espressioni di funzioni con nome: http://kangax.github.io/nfe/ .

Se la soluzione di @ Cybernate non funziona, prova a interrompere il trigger nella sua funzione in modo da poterlo fare riferimento.

 clickHandler = function(event){ if (click++ == 49) canvas.removeEventListener('click',clickHandler); } canvas.addEventListener('click',clickHandler); 
 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; }; }; 

Se qualcuno usa jquery, può farlo in questo modo:

 var click_count = 0; $( "canvas" ).bind( "click", function( event ) { //do whatever you want click_count++; if ( click_count == 50 ) { //remove the event $( this ).unbind( event ); } }); 

Spero che possa aiutare qualcuno. Si noti che la risposta fornita da @ user113716 funziona bene 🙂

Penso che potrebbe essere necessario definire la funzione del gestore in anticipo, in questo modo:

 var myHandler = function(event) { click++; if(click == 50) { this.removeEventListener('click', myHandler); } } canvas.addEventListener('click', myHandler); 

Questo ti permetterà di rimuovere il gestore per nome dal suo interno.

Prova questo, ha funzionato per me.

   

Prova questo

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