JS - Как удалить активный EventListener без перезагрузки веб-страницы - PullRequest
Новая
       74

JS - Как удалить активный EventListener без перезагрузки веб-страницы

0 голосов
/ 31 октября 2019

У меня есть функция playGame (), которая запускает eventListener. Каждый раз, когда запускается новая игра, функция playGame () создает дополнительный eventListener. Как можно удалить активный eventListener, чтобы каждый раз, когда играли в игру, чтобы новый не добавлялся.

Я пытался использовать removeEventListener, как описано здесь - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener. Я также рассмотрел похожие проблемы переполнения стека (например, Удаление прослушивателей событий перед тем, как покинуть страницу ), но решение там не применимо.

Вот как устроена функция. Я пытаюсь удалить старый eventListener перед загрузкой остальных сценариев игры. 

function playGame() {
    console.log('new game');
    // should remove event listener from previous game
    document.removeEventListener('keyup', function() {userInput(activeStringObj, event.key);});

    loadStartOutput();
    wordPicker(activeStringObj);
    addLetterDivs(activeStringObj); 
    addHint(activeStringObj);

    document.addEventListener('keyup', function() {userInput(activeStringObj, event.key);});
}

Я регистрирую массив, в котором записываются нажатия клавиш пользователя, и очевидно, что несколько EventListeners записывают входные данные. 

new game (typed 'a' 's')

game.js:98 ["a"]

game.js:98 (2) ["a", "s"]

new game (typed 'd' 'f')

game.js:98 (3) ["a", "s", "d"]

game.js:98 (4) ["a", "s", "d", "d"]

game.js:98 (5) ["a", "s", "d", "d", "f"]

game.js:98 (6) ["a", "s", "d", "d", "f", "f"]

new game (typed 'h' 'j')

game.js:98 (7) ["a", "s", "d", "d", "f", "f", "h"]

game.js:98 (8) ["a", "s", "d", "d", "f", "f", "h", "h"]

game.js:98 (9) ["a", "s", "d", "d", "f", "f", "h", "h", "h"]

game.js:98 (10) ["a", "s", "d", "d", "f", "f", "h", "h", "h", "j"]

game.js:98 (11) ["a", "s", "d", "d", "f", "f", "h", "h", "h", "j", "j"]

game.js:98 (12) ["a", "s", "d", "d", "f", "f", "h", "h", "h", "j", "j", "j"]

Я ожидаю, что при каждом нажатии клавиши в массив будет добавляться только одна буква.

Ответы [ 2 ]

1 голос
/ 31 октября 2019

При добавлении и удалении прослушивателей событий функция обработчика (включая сигнатуру функции) должна быть одинаковой. В своем коде вы дважды написали одно и то же определение функции! Это означает, что идентичная функция объявляется дважды. Это не та же функция. Вместо этого попробуйте это: 

function takeAction(event) {
    userInput(activeStringObj, event.key)
}

function playGame() {
    console.log('new game');
    // should remove event listener from previous game
    document.removeEventListener('keyup', takeAction);

    loadStartOutput();
    wordPicker(activeStringObj);
    addLetterDivs(activeStringObj); 
    addHint(activeStringObj);

    document.addEventListener('keyup', takeAction);
}

Это должно сделать работу за вас.

1 голос
/ 31 октября 2019

Вы должны передать одну и ту же функцию, чтобы удалить, по указателю, тела функций одинаковые, но они не являются одним и тем же объектом, это 2 отдельных указателя на 2 разных объекта функции с одинаковым телом.

Илидобавьте прослушиватель событий один раз и передайте обработчику текущий игровой объект, который вы используете в качестве аргумента

...