代码之家 › 专栏 › 技术社区 › fxvlad

如何在没有外部函数的情况下删除事件侦听器

web html javascript

fxvlad · 技术社区 · 8 年前

陷入了真正的困境。我有一个init函数,里面有很多参数,这些参数相互依赖,不能从外面删除,还有一个元素数组,每个元素都添加了一个click事件监听器。此事件侦听器检查单击的元素是否为某个元素,然后从数组中的所有元素中删除单击侦听器。问题是,由于init函数的内部参数,我必须在事件监听器中使用anonimus函数,但要删除事件监听器,我必须在removeEventListener中传递相同的函数,因此它必须命名为function,我无法获得解决方案。

近似逻辑:

let init = () =>{

  //some internal parameters here and logic

  for (let i = 0; i < elArr.length; i++) {

    elArr[i].addEventListener('click', event => {
        if (event.target.style.background ===
            elArr[pickedElement].style.background) {

            //Not working (can't define the param as a separate function due 
            //to params of this function can't be passed to there)
            for (let i = 0; i < elArr.length; i++)
                elArr[i].removeEventListener("click", event);

        } else {
            event.target.style.background = bgColor;
        }
    });  
}

2 回复 | 直到 8 年前

kingdaro 8 年前

除非我遗漏了什么,否则看起来您可以声明命名函数 在…内 ,所以它仍然可以访问所有内部变量等。

let init = () => {
  //some internal parameters here and logic

  let bgCheckListener = event => {
    if (
      event.target.style.background ===
      elArr[pickedElement].style.background
    ) {
      elArr.forEach(el => {
        el.removeEventListener("click", bgCheckListener)
      })
    } else {
      event.target.style.background = bgColor
    }
  }

  elArr.forEach(el => {
    el.addEventListener("click", bgCheckListener)
  })
}