Question

我处于两个元素上有一个EventListener并且它们具有相同处理程序的情况。 EventListeners被添加到函数内部，并且处理程序接受参数。

当单击这些元素之一时，应删除两个元素上的EventListeners。

示例代码：

const handler = (e, x, otherEle) => {
    e.target.removeEventListener('click', callHandler)
    otherEle.removeEventListener('click', callHandler)
    //callHandler is not defined
}

const myFunc = ()=>{
   let x = 7
   let ele1 = document.querySelector("#ele1")
   let ele2 = document.querySelector("#ele2")

   ele1.addEventListener('click', function callHandler(event){
     handler(event, x, ele2)
   })

   ele2.addEventListener('click', function callHandler(event){
    handler(event, x, ele1)
   })
}

我试图将函数callHandler作为参数传递，但这没有用。

Answer 1

您可以使用许多策略来解决此问题。最简单的事实可能是在全局范围内已经可以使用ID标识元素，因此您可以将它们作为常规变量或从window对象进行引用：

const handler = () => {
    console.log("calling handler only once");
    ele1.removeEventListener('click', handler)
    ele2.removeEventListener('click', handler)
}

const myFunc = () => {
   // These references to element IDs are already available in the global scope
   // let ele1 = document.querySelector("#ele1")
   // let ele2 = document.querySelector("#ele2")

   ele1.addEventListener('click', handler);
   ele2.addEventListener('click', handler);
}

myFunc();

div {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div id="ele1"></div>
<div id="ele2"></div>

另一种选择是只使用onclick而不是添加和删除事件侦听器，它们的工作方式相同（它只能防止侦听元素上的多个单击事件）：

const handler = (e, x, otherEle) => {
    console.log("calling handler only once");
    e.target.onclick = null;
    otherEle.onclick = null;
}

const myFunc = ()=>{
   let x = 7
   let ele1 = document.querySelector("#ele1")
   let ele2 = document.querySelector("#ele2")

   ele1.onclick = function (event) {
     handler(event, x, ele2)
   }

   ele2.onclick = function (event) {
     handler(event, x, ele1)
   }
}

myFunc();

div {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div id="ele1"></div>
<div id="ele2"></div>

另一种方法（虽然可能是最难实现的）是通过使用.bind()之类的东西来传递对函数调用中元素的引用，作用域有点笨拙，我不确定用箭头可以实现功能。

ele1.addEventListener('click', handler.bind(this, ele2, x))

删除处理程序不在范围内的事件侦听器

1 个答案: