RemoveEventListener不起作用

时间:2017-10-12 07:41:25

标签: javascript ecmascript-6

我有这个非常奇怪的案例,阻止我删除eventListener。这是一个非常简单的函数,可以在不需要时绑定到键盘事件和解绑(理论上)。

代码如下:

const keyboardEvents = function(input, remove = false) {
    const { key, func } = input;
    const operation = remove ? 'removeEventListener' : 'addEventListener';

    function keyboardFunction(event) {
        console.log(event);

        if (event.keyCode === key) {
            func();
        }
    }

    window[operation]('keyup', keyboardFunction);

  if (remove) {
    console.log('REMOVED');
  } else {
    console.log('ADDED');
  }
};

我用

运行它
keyboardEvents({ key: 27, func: testFunc }); // add event
keyboardEvents({ key: 27, func: testFunc }, true); // remove event

问题是,听众没有被删除。我该怎么办?

CodePen供参考:https://codepen.io/tomekbuszewski/pen/LzBZgP?editors=0010

我也试过没有operation,只是写

if (remove) {
  window.removeEventListener('keyup', keyboardFunction);
} else {
  window.addEventListener('keyup', keyboardFunction);
}

结果是一样的。

1 个答案:

答案 0 :(得分:4)

您需要提供相同的函数引用以从事件处理程序中删除。每次调用keyboardEvents时,都会创建一个带名称的新函数 keyboardFunction,所以与呼叫呼叫不同。那么为什么你不能删除它。

试试此代码Codepen