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

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

0 голосов
/ 13 марта 2019

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

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

Ответы [ 2 ]

0 голосов
/ 13 марта 2019

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

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" />
0 голосов
/ 13 марта 2019

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

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

sub_function() {
    //...
}

mousemoveList() {
    // ....
}

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

sub_function() {
    mouseMoveList();
}
...