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

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

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

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, где предполагается удалить прослушиватель. Проблема в том, что слушатель не удаляется.

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


javascript removeeventlistener
person havelly    schedule 13.03.2019    source источник
comment
вы можете предоставить рабочую скрипку?   -  person prasanth    schedule 13.03.2019
comment
Где определяется mousemoveList? Я думаю, что этот код приведет к ошибке, как и сейчас, поскольку единственный mousemoveList здесь выходит за рамки.   -  person Talha    schedule 13.03.2019
comment
RemoveEventListener выходит за рамки? это просто другая ветвь оператора if для addEventListener, и addEventListener работает !.   -  person havelly    schedule 13.03.2019
comment
movemouseList определен в той же ветке, что и addEventListener, поэтому он работает. Он должен быть определен вне блока if, чтобы его могли использовать оба.   -  person Chris Sandvik    schedule 13.03.2019

Ответы (2)


arrow_upward
0
arrow_downward

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

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

sub_function() {
    //...
}

mousemoveList() {
    // ....
}

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

sub_function() {
    mouseMoveList();
}
person Chris Sandvik    schedule 13.03.2019
comment
Ваш вклад приветствуется, но мне нужно сохранить объем как есть. - person havelly; 13.03.2019
comment
можешь объяснить почему? или дать ссылку на другой код? область видимости, скорее всего, является причиной того, что ваш оператор else не имеет доступа к функции mosemoveList, они не находятся в той же области. - person Chris Sandvik; 13.03.2019
comment
Область видимости позволяет разделять переменные. Функция mousemoveList () использует переменные из sub_function (). - person havelly; 13.03.2019
comment
Хорошо, хотя это может быть правдой, ваша область видимости не позволяет removeEventListener получить доступ к функции. Лучшим способом организации кода было бы добавить в функцию mousemoveList нужные вам значения в качестве параметров и переместить его на более высокий уровень вашей области видимости. И если ему нужны переменные из sub_function, возможно, прослушиватель событий должен быть для подфункции. Трудно сказать, не зная больше о том, как на самом деле работает ваш код. - person Chris Sandvik; 13.03.2019

arrow_upward
0
arrow_downward

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

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" />

person Prithwee Das    schedule 13.03.2019
comment
Ваш ответ приветствуется. Я попробовал ссылку на CodePen, но она не загрузилась. Что касается предоставленного вами фрагмента кода Stackoverflow, я все еще его перевариваю и смотрю, как он может помочь. - person havelly; 13.03.2019
comment
О какой загрузке ты говоришь? даже если код не открывается, у меня к ответу прикреплен тот же код, что и у сниппера, запустите его, и вы увидите, что вы получите mousemove только тогда, когда установлен флажок. - person Prithwee Das; 13.03.2019