Javascript addEventListener et removeEventListener avec fonction partielle

Question

Je veux créer une fonction javascript ajoute un écouteur d'événement à un div de telle sorte que lorsque le div est cliqué, il exécute une fonction, et assure que le div ne peut être cliqué qu'une seule fois. Ma fonction ressemble à ce moment:

function clickOnce(divID,func){ 
    var args = Array.prototype.slice.call(arguments,2); 
    functionToRun=partial(func,args); 
    thisDiv=document.getElementById(divID); 
    thisDiv.addEventListener("click",function(e){ 
    e.target.removeEventListener(e.type, arguments.callee); 
    functionToRun(); 
    }); 
} 

J'ai un exemple de travail en jsFiddle: https://jsfiddle.net/qtzLhgr4/1/ Dans le jsFiddle, lorsque je clique sur le bouton 1, il dit « bouton # 2 cliqué ».

Answer 1

functionToRun (et thisDiv, mais ce n'est pas lié au problème) est global. Le deuxième appel à clickOnce remplace functionToRun, donc les deux gestionnaires d'événements exécutent la même fonction.

Toujours déclarer vos variables. Notez également que arguments.callee est obsolète. Vous pouvez utiliser un named function expression à la place.

Answer 2

Vous n'avez pas déclaré functionToRun, donc il est implicitement global. Déclarer et thisDiv:

var functionToRun=partial(func,args); 
var thisDiv=document.getElementById(divID); 

Puis commencer à travailler dans strict mode, ce qui empêchera ce genre de problèmes aussi bien que vous empêcher d'utiliser arguments.callee, qui est la mauvaise façon de faire les choses:

thisDiv.addEventListener("click", function listener(e) { 
    thisDiv.removeEventListener("click", listener); 
    functionToRun(); 
}); 

(e.target était également incorrect, this aurait été mieux.)