Javascript 单击特定div时只执行一次事件侦听器，但在其他div上继续执行它

我有一个循环，它通过同一个类的24个div（box），里面有一个事件监听器。每次有人单击div（框），它都会更改背景色。问题是，我一直在跟踪打开了多少个“框”，但在我当前的代码中，即使打开了框，每次有人单击框时，openedBox变量都会不断增加

for(var i = 0; i < boxes.length; i++){
  boxes[i].addEventListener("click", function(){
    this.style.backgroundColor = "#09093F";
    openedBoxes++;
});

for（变量i=0；i

我想知道的是，是否可以阻止事件侦听器在每个div上执行不止一次。或者更容易找到另一种方法来跟踪打开的框（例如，计算有多少框具有#09093F背景）

---

另外，我尝试在事件监听器中添加

这个.removeEventListener（“单击”，function（）{}）；

，但显然它不是那样工作的哈哈。

您可以删除事件监听器：

for（变量i=0；i{
this.style.backgroundColor=“#09093F”；
openedbox++；
框[temp]。移除EventListener（“单击”，listenerFuncPlaceholder）；
};
框[i]。添加了ListenerListener（“单击”，listenerFunc）；
listenerFuncPlaceholder=listenerFunc；//以便可以删除它
}

您可以在第三个参数中使用

一次

选项

once

：一个布尔值，指示在添加侦听器后最多应调用一次。如果为true，则在调用侦听器时将自动删除该侦听器

---

removeEventListener

不起作用的原因是，实际上必须将

listener

函数传递给

removeEventListener

调用。因此，传递给

addEventListener

的相同函数必须在

removeEventListener

中使用，请参见我的回答。我认为这将停止事件侦听器r所有框，但现在在尝试之后，我理解了它的工作原理（事件侦听器分别在每个div上执行）。谢谢！这也是一种可能性，但另一个用户指出了一个更简单的asnwer。谢谢回复！

element.addEventListener('click', function(event) {
  // ...
}, {once: true});