时间戳

首页 > 解决方案 > 删除处理程序不在范围内的事件侦听器

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

问题描述

我的情况是我有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作为参数传递，但没有奏效。

标签： javascriptdomdom-events

解决方案

您可以使用许多策略来解决此问题。最简单的可能是对具有 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))

推荐阅读