Удаление прослушивателя событий не работает

ProgramBox

Удаление прослушивателя событий не работает

Post author:admin
Запись опубликована:18 мая, 2023
Post category:Вопросы по программированию

#javascript #removeeventlistener

Вопрос:

mousemove Прослушиватель был помещен в <canvas> тег. Прослушиватель работает так, как ожидалось. Проблема заключается в попытке удалить прослушиватель.

Структура программы заключается в том, что для вызова функции main используется флажок, который имеет следующую структуру:

 main_function(el) {  
    if (el.checked) {
        // ....
        sub_function();
        canvasEl.addEventListener('mousemove', mousemoveList);
        sub_function() {
            // ....
            mousemoveList() {
               // ....
            }
        }
     } else {
        canvasEl.removeEventListener('mousemove',mousemoveList);
     }
}

При нажатии на флажок main_function() вызывается, выполняется переход по el.checked пути, вызывается sub_function() — который имеет mousemoveList() функцию — и, наконец, успешно добавляется прослушиватель.

Когда флажок снят, следует else путь, по которому прослушиватель должен быть удален. Проблема в том, что прослушиватель не удаляется.

Сохраняя вышеуказанную структуру программы, как можно решить проблему с прослушивателем событий?

1. можете ли вы предоставить рабочую скрипку?

2. Где mousemoveList определено? Я думаю, что этот код выдаст ошибку, как и сейчас, поскольку единственное mousemoveList здесь выходит за рамки.

3. Является ли removeEventListener вне области видимости? это просто перевод другой ветви инструкции ‘if’ в addEventListener, и addEventListener работает!.

4. movemouseList определен в в той же ветке, что и addEventListener, вот почему он работает. Это должно быть определено вне блока if, если оно должно использоваться обоими.

Ответ №1:

Почему вы объявляете вложенные функции подобным образом? В общем случае нет причин объявлять определения функций внутри других функций, просто выполняйте вызовы к ним. Что-то подобное могло бы работать лучше:

 main_function(el) {  
    if (el.checked) {
        // ....
        sub_function();
        canvasEl.addEventListener('mousemove', mousemoveList);
     } else {
        canvasEl.removeEventListener('mousemove',mousemoveList);
     }
}

sub_function() {
    //...
}

mousemoveList() {
    // ....
}

и если вам нужно вызвать свои вспомогательные функции в рамках более высоких функций, просто вызовите их

 sub_function() {
    mouseMoveList();
}

1. Ваш вклад приветствуется, но мне нужно сохранить область видимости такой, какая она есть.

2. можете ли вы объяснить, почему? или предоставить ссылку на дополнительную часть кода? скорее всего, причиной того, что ваш оператор else не имеет доступа к функции mosemoveList, является ограничение области, они не находятся в одной и той же области.

3. Область видимости позволяет совместно использовать переменные. Функция mousemoveList() использует переменные из sub_function().

4. Хорошо, хотя это может быть правдой, ваша область видимости не позволяет removeEventListener получить доступ к функции. Лучшим способом упорядочить ваш код было бы добавить нужные вам значения в mousemoveList функцию в качестве параметров к ней и переместить ее на более высокий уровень вашей области видимости. И если ему нужны переменные из sub_function, возможно, прослушиватель событий должен быть для вспомогательной функции. Трудно сказать, не зная больше о том, как на самом деле функционирует ваш код.

Ответ №2:

Я думаю, что вы усложняете вещи там, где это не нужно, я сделал простой пример codepen, который вы можете проверить, надеюсь, это поможет

 const el = document.querySelector("input[type=checkbox]");

function mousemove() {
  console.log("mousemove");
}

el.addEventListener("click", function(e) {
  if (e.target.checked) document.addEventListener("mousemove", mousemove);
  else document.removeEventListener("mousemove", mousemove);
});

 <input type="checkbox" />

1. Ваш ответ приветствуется. Я попробовал ссылку CodePen, и она не загрузилась для меня. Что касается предоставленного вами фрагмента кода Stackoverflow, я все еще перевариваю его и вижу, как это может помочь.

2. О какой загрузке вы говорите? даже если codepen не открывается, у меня есть тот же код, прикрепленный к ответу, что и snipper, запустите его, и вы увидите, что вы получите mousemove только тогда, когда установлен флажок.