JavaScript: Supprimer l'événement auditeur

Question

J'essaie de supprimer un écouteur d'événement à l'intérieur d'une définition de l'auditeur:

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

Comment pourrais-je faire cela? this = event ... Merci.

Answer 1

Essayez cette

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

Answer 2

Si @ solution de Cybernate ne fonctionne pas, essayez de casser la gâchette hors pour sa propre fonction de sorte que vous pouvez référencer.

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

Answer 3

Vous devez utiliser des fonctions nommées.

De plus, la variable click doit être en dehors du gestionnaire pour être incrémentée.

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 pouvez fermer autour de la variable click_counter 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, et que vous voulez chacun d'avoir son propre compteur, faites 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 étant retourné dans les deux dernières versions. Fixé.

Answer 4

Je pense que vous devrez peut-être définir la fonction de gestionnaire à l'avance, comme ceci:

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

Cela vous permettra de supprimer le gestionnaire par nom en lui-même.

Answer 5

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

Doit le faire.

Answer 6

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

Answer 7

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

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

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

Plus d'informations sur les expressions de fonction nommées: http://kangax.github.io/nfe/.

Answer 8

Si quelqu'un utilise jquery, il peut le faire comme ceci:

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

espoir que cela peut aider quelqu'un. Notez que la réponse donnée par @ user113716 fonctionne bien :)

Answer 9

Essayez ceci, cela a fonctionné pour moi.

<button id="btn">Click</button> 
<script> 
console.log(btn) 
let f; 
btn.addEventListener('click', f=function(event) { 
console.log('Click') 
console.log(f) 
this.removeEventListener('click',f) 
console.log('Event removed') 
}) 
</script>