Javascript addEventListener и removeEventListener с частичной функцией

Question

Я хочу создать функцию javascript, добавляет прослушиватель событий в div так, что при нажатии на div он запускает функцию и гарантирует, что div может быть нажат только один раз. Моя функция выглядит это прямо сейчас:

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

У меня есть рабочий пример в jsfiddle: https://jsfiddle.net/qtzLhgr4/1/ В JSfiddle, когда я нажимаю кнопку 1 он говорит: «Кнопка # 2 щелкнул».

Answer 1

functionToRun (и thisDiv, но это не связано с проблемой) является глобальным. Второй вызов clickOnce перезаписывает functionToRun, поэтому оба обработчика событий выполняют одну и ту же функцию.

Всегда объявляйте свои переменные. Также обратите внимание, что arguments.callee устарел. Вместо этого вы можете использовать named function expression.

Answer 2

Вы не объявили functionToRun, так что это неявно глобально. Объявить его и thisDiv:

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

Затем начинают работать в strict mode, что позволит предотвратить подобные проблемы, а также остановить вас от использования arguments.callee, что это неправильный способ делать вещи:

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

(e.target также был неверен: 10 было бы лучше.)