Question

在我的JS模块中，我有一个添加几个事件监听器的函数

clickCatcher.addEventListener("click", this.clickCatcherFunction);
window.addEventListener('resize', this.clickCatcherFunction);
document.addEventListener('keydown', this.clickCatcherFunction);

并调用clickCatcherFunction函数，到目前为止一切正常。现在是时候删除其中所有一个触发的所有事件侦听器了。

document.removeEventListener('keydown', this.clickCatcherFunction);

没有错误，但事件侦听器仍处于活动状态。如何访问传入的相同函数？在侦听器函数中，this.someOtherFunc也将失败。此侦听器的范围是什么，发生了变化吗？

编辑。为上下文添加更多内容：

export default class Hints {

    constructor(){
        //ref for adding and removing
        this.clickCatcherFunction = this.clickCatcherFunction.bind(this);

        //add invisible top div to catch click and remove hint, 
        const clickCatcher = document.createElement("div"); 
        clickCatcher.id = "clickCatcher";
        document.body.appendChild(clickCatcher);
        clickCatcher.addEventListener('click', this.clickCatcherFunction);
        window.addEventListener('resize', this.clickCatcherFunction);
        document.addEventListener('keydown', this.clickCatcherFunction);
    }

    clickCatcherFunction() {
        //clickCatcher gets deleted from the dom
        document.removeEventListener('keydown', this.clickCatcherFunction);
        window.removeEventListener('resize', this.clickCatcherFunction);
    }
}


//in the JS that imported Hints.JS
import Hints from "../Hints.js"
let hint = new Hints();

将解决方案添加到构造函数中。

Answer 1

添加电话时，您每次通话都需要拨打.removeEventListener。

因此，从您的代码中：

clickCatcher.removeEventListener('click', this.clickCatcherFunction);
window.removeEventListener('resize', this.clickCatcherFunction);
document.removeEventListener('keydown', this.clickCatcherFunction);

请注意，以您的方式指向this时要格外小心。 this将成为您正在调用的上下文的封闭对象。可能不是您想要的。

根据您的修改：

document.addEventListener('keydown', this.clickCatcherFunction.bind(this));

会帮助您。

无法从监听器中删除EventListeners

1 个答案: