無法在熱模塊更換時刪除偵聽器

Question

我正在注冊一個處理程序（用於click事件）。 在注冊處理程序之前，我清除了同一處理程序，以免注冊兩個相同的處理程序。

我正在使用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() ，則僅刪除最后一個處理程序。

Answer 1

保存對函數的引用，以便刪除要添加的相同函數，還需要.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代碼后）解決方案是保存處理窗口對象或全局變量，是不是這就是刷新的模塊的一部分，這是不理想，但可能會做這是您的絕招，因為這是例外情況。