Не удается удалить слушателя при горячей замене модуля - PullRequest
Новая
       23

Не удается удалить слушателя при горячей замене модуля

0 голосов
/ 02 апреля 2019

Я регистрирую обработчик (для события клика).Перед регистрацией обработчика я очищаю один и тот же обработчик, чтобы не регистрировать два одинаковых обработчика.

Я использую горячую замену модуля Webpack.Каждый раз, когда я что-то изменяю в исходном коде JavaScript, часть кода, регистрирующая обработчик, перезапускается.

Однако обработчик никогда не удаляется. 

export default class TaskHandlers {
    // Called from index.js
    registerAddTaskClick(addTaskElementId) {
        let element = document.querySelector(`#${addTaskElementId}`);
        if (element !== null) {
            // Never clears the handler
            element.removeEventListener('click', this.handleAddTaskClick);
            // Keeps piling on new handlers on every HMR.
            element.addEventListener('click', this.handleAddTaskClick);
        }
    }

    handleAddTaskClick(event) {
        console.log('Clicked');
    }
}

Если я запускаю element.removeEventListener() вручную, удаляется только последний обработчик.

1 Ответ

1 голос
/ 02 апреля 2019

Сохраните ссылку на функцию, чтобы удалить ту же функцию, которую вы добавляете, вам также потребуется .bind(this). 

export default class TaskHandlers {
    constructor() {
        this.element = document.querySelector(`#${addTaskElementId}`);
        this.handleAddTaskClick = this.handleAddTaskClick.bind(this);
    }

    // Called from index.js
    registerAddTaskClick(addTaskElementId) {
        if (this.element !== null) {
            this.element.addEventListener('click', this.handleAddTaskClick);
        }
    }

    handleAddTaskClick(event) {
        this.element.removeEventListener('click', this.handleAddTaskClick);
        console.log('Clicked');
    }
}

Обновление: Также удалитьэлемент, когда вы щелкаете по нему, а не раньше, чтобы вы знали, что к нему уже привязан прослушиватель.

Решение, которое может работать (если действительно необходимо сохранить экземпляр после изменениякод с HMR) предназначен для сохранения обработчика в объекте окна или глобальной переменной, которая не является частью обновляемого модуля, это не идеально, но может помочь вам, так как это исключительный случай.

...