removeEventListener
не будет работать здесь, потому что функции ссылаются на анонимную функцию:
const startSelectNode = (stepIndex) => {
document.addEventListener("click", (e) => onClick(e, stepIndex), true);
};
const stopSelectNode = (stepIndex) => {
document.removeEventListener("click", (e) => onClick(e, stepIndex), true);
};
Но я не могу назвать функцию здесь, потому что она требует stepIndex
, которая является локальной переменной. Как я могу заставить это работать?
Вы можете определенно назвать функцию, вам просто нужно сделать это вне области действия функции, например:
function onStepIndex(e, stepIndex) {
// your action here
}
const startSelectNode = (stepIndex) => {
document.addEventListener("click", onStepIndex(e, stepIndex), true);
};
const stopSelectNode = (stepIndex) => {
document.removeEventListener("click", onStepIndex(e, stepIndex), true);
};
Ответ Яира Коэна имеет правильную идею, но чего-то не хватает. addEventListener
требуется ссылка на функцию, а не вызов функции. В его коде onStepIndex
будет выполняться один раз и больше никогда.
Чтобы создать ссылку на функцию и передать ей параметры, а затем удалить прослушиватель событий, вы можете использовать концепцию под названием каррирование.
const onStepIndex = function(stepIndex) {
return function actualOnStepIndex(event) {
console.info(event);
console.info(stepIndex);
}
}
const handlers = [];
const startSelectNode = (stepIndex) => {
document.addEventListener("click", handlers[stepIndex] = onStepIndex(stepIndex), true);
};
const stopSelectNode = (stepIndex) => {
document.removeEventListener("click", handlers[stepIndex], true);
};
startSelectNode(1); // This adds the event listener for stepIndex = 1
stopSelectNode(1); // This removes the event listener for stepIndex = 1
По сути, вызывая onStepIndex
, вы возвращаете фактическую функцию, которая теперь является обработчиком события. Мы сохранили ссылку на функцию в массиве handlers
, и нам понадобится эта ссылка, если мы позже захотим вызвать removeEventListener
.
Это не то, как вы передаете ссылку на функцию
onStepIndex
.