无法动态删除事件侦听器答案

【问题标题】：Can't remove event listener dynamically无法动态删除事件侦听器
【发布时间】：2023-02-04 19:22:33
【问题描述】：

您好，我正在构建游戏，在某些情况下，我需要从刚刚单击的 Div 中删除 eventListener。

我不知道为什么它不起作用...这是我的代码。谢谢！！

  let Divs = document.querySelectorAll(".data")



 Divs.forEach((v,k)=>{
 v.addEventListener("click", (e)=> {clic(e,v,k)} )
   })

 function clic(e,v,k)
{
console.log("CLICK")
Divs[k].removeEventListener("click", (e)=> {clic(e,v,k)} )
 }

有9个div。基本上我不希望用户在同一个 div 上点击两次！我正在尝试使用 RemoveEventListener 解决问题

【问题讨论】：

如果你在这里搜索，你会发现很多关于删除事件监听器的答案。基本上，您的 add 事件侦听器必须调用一个函数，remove 将其删除。搜索那里有很好的描述如何做到这一点
它使用简单的语法工作，但如果你想让事情更复杂，它就不再工作了……以前的答案没有帮助
您需要传递相同的函数引用。
这回答了你的问题了吗？ removeEventListener on anonymous functions in JavaScript
还有：remove event listeners with extra arguments和Remove Event Listeners that need to Receive Multiple Arguments JS

标签： javascript addeventlistener removeeventlistener

【解决方案1】：

9格的游戏！你在做井字游戏吗？:)

带有 9 div 的小 sn-p，我在 div 6 中添加了一个按钮以删除 div5 的事件

我将删除放在一个函数中，因此您可以在代码中的某处使用条件调用它。你必须传递 div 的名称

Array.from(document.querySelectorAll('.grid>div')).forEach(el => {
  el.addEventListener('click', divclickadd);
});

function divclickadd(ev) {
  console.log(ev.target);
}

document.querySelector('button').addEventListener('click', function(evt) {
  evt.stopImmediatePropagation();
  console.log(evt.target.className);
  divclickremove(evt.target.className);
});

function divclickremove(div) {
  const el = document.querySelector('#' + div);
  console.log(el);
  el.removeEventListener('click', divclickadd);
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
}

.grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  height: 100%;
}

.grid>div {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="grid">
  <div id="div1" style="background-color: red">div 1</div>
  <div id="div2" style="background-color: blue">div 2</div>
  <div id="div3" style="background-color: green">div 3</div>
  <div id="div4" style="background-color: yellow">div 4</div>
  <div id="div5" style="background-color: purple">div 5</div>
  <div id="div6" style="background-color: brown">div 6
    <button class="div5">remove event 5</button>
  </div>
  <div id="div7" style="background-color: darkolivegreen">div 7</div>
  <div id="div8" style="background-color: orangered">div 8</div>
  <div id="div9" style="background-color: cadetblue">div 9</div>
</div>

【讨论】：