Question

我调用的函数内部带有“ if / else”语句，该语句根据作为参数传递的布尔值添加或删除侦听器。
我的问题是我无法通过调用同一函数来删除先前添加的侦听器
我想念的是什么？

function listenerTest(handler) {
    if(handler) {
        window.addEventListener("click", clickFn);
    }
    else {
        window.removeEventListener("click", clickFn);
    }

    function clickFn(event) {
        console.log(event)
    }
}        

listenerTest(true);  

window.setTimeout(listenerTest, 5000, false);  
   // call the "listenerTest" function 5 seconds later with "false" argument does NOT remove the listener

我已经运行了多个测试，有趣的是，这是可行的

function listenerTest(handler) {
    if(handler) {
        window.addEventListener("click", clickFn);      // listener added
        window.removeEventListener("click", clickFn);   // and removed right after in the same block scope
    }

    function clickFn(event) {
        console.log(event)
    }
}        

listenerTest(true);

Answer 1

删除clickFn并将其置于listenerTest的范围之外。每次调用该函数时，它都会创建一个新实例，因为clickFn悬挂在listenerTest函数的顶部。

function clickFn(event) {
  console.log(event)
}

function listenerTest(handler) {
    if(handler) {
        window.addEventListener("click", clickFn);
    }
    else {
        window.removeEventListener("click", clickFn);
    }
}        

listenerTest(true);  

window.setTimeout(listenerTest, 5000, false);

Answer 2

这是因为每次调用函数'listenerTest'时，都会为函数'clickFn'分配一个新的内存地址，因此当您尝试删除它时，它与将其添加到事件侦听器时是一个不同的函数。

Answer 3

您可以在listenerTest（true）之前使用条件检查侦听器是否存在 getComponentListeners 可能有用

无法从函数内部删除eventListener

3 个答案: