Javascript addEventListener（'；单击'；，function（），{once:true}）在同一位置多次触发

let doorLeft=document.getElementById（“左”）；
让doorMiddle=document.getElementById（“中间”）；
让doorRight=document.getElementById（“right”）；
让resetButton=document.getElementById（“reset”）；
让numberOfClicks=0；
函数incrementClicks（）{
点击次数++；
console.log（'点击次数：'+点击次数）
}
/* -------------------------------------------------------------------------- */
/*把手只能点击门一次*/
/* -------------------------------------------------------------------------- */
常量显示颜色=（）=>{
doorLeft.addEventListener(
“点击”，
() => {
增量单击（）；
}, {
一次：没错，
}
);
doorMiddle.addEventListener(
“点击”，
() => {
增量单击（）；
}, {
一次：没错，
}
);
doorRight.addEventListener(
“点击”，
() => {
增量单击（）；
}, {
一次：没错，
}
);
};
/* -------------------------------------------------------------------------- */
常数重置=（）=>{
doorLeft.style.backgroundColor=“淡绿色”；
doorRight.style.backgroundColor=“淡绿色”；
doorMiddle.style.backgroundColor=“淡绿色”；
显示颜色（）；
resetButton.innerHTML=“让我们玩”；
};
resetButton.addEventListener（“单击”，函数（）{
重置（）；
点击次数=0；
});
.container.main{
显示器：flex；
证明内容：周围的空间；
填充：0.20%；
}
.门{
高度：500px；
宽度：300px；
利润率：10px；
}
#左{
背景颜色：淡绿色；
}
#中间的{
背景颜色：淡绿色；
}
#对{
背景颜色：淡绿色；
}
.得分{
文本对齐：居中；
}

猜门者
当前分数：
0
最佳成绩：
0
我们来玩吧
addEventListener的
once
选项的工作原理如下：

once
    A Boolean indicating that the listener should be invoked at most once after being added.
    If true, the listener would be automatically removed when invoked.

因此，如果未单击某个div，其处理程序仍保留在那里。再次单击“播放”时，基本上会向div添加更多事件侦听器。为什么它会被随机触发多次（在相同的x/y坐标下）

要解决这个问题，只需在reset中删除事件侦听器


let doorLeft=document.getElementById（“左”）；
让doorMiddle=document.getElementById（“中间”）；
让doorRight=document.getElementById（“right”）；
让resetButton=document.getElementById（“reset”）；
让numberOfClicks=0；
函数incrementClicks（）{
点击次数++；
console.log（'点击次数：'+点击次数）
}
/* -------------------------------------------------------------------------- */
/*把手只能点击门一次*/
/* -------------------------------------------------------------------------- */
常量显示颜色=（）=>{
门左。removeEventListener（“单击”，递增单击）；
removeEventListener（“单击”，递增单击）；
doorRight.removeEventListener（“单击”，递增单击）；
//
addEventListener（“click”，incrementClicks，{once:true}）；
addEventListener（“click”，incrementClicks，{once:true}）；
addEventListener（“click”，incrementClicks，{once:true}）；
};
/* -------------------------------------------------------------------------- */
常数重置=（）=>{
doorLeft.style.backgroundColor=“淡绿色”；
doorRight.style.backgroundColor=“淡绿色”；
doorMiddle.style.backgroundColor=“淡绿色”；
显示颜色（）；
resetButton.innerHTML=“让我们玩”；
};
resetButton.addEventListener（“单击”，函数（）{
重置（）；
点击次数=0；
});
.container.main{
显示器：flex；
证明内容：周围的空间；
填充：0.20%；
}
.门{
高度：500px；
宽度：300px；
利润率：10px；
}
#左{
背景颜色：淡绿色；
}
#中间的{
背景颜色：淡绿色；
}
#对{
背景颜色：淡绿色；
}
.得分{
文本对齐：居中；
}

猜门者
当前分数：
0
最佳成绩：
0
我们来玩吧
嗨！请使用演示问题的示例更新您的问题，最好是使用堆栈片段（
[]
工具栏按钮）运行的问题。也许这些元素相互嵌套？完成：）很抱歉最初提供的信息太少。嗨！恐怕你走了另一条路。请仔细阅读上面的链接以了解详细信息。我想这是我能剥去它的最小值，所以它仍然不正常。如果我单击“让我们玩”，然后单击门1，我会收到一条消息。如果我再按一下1号门，我不会；如果我点击一个不同的门，我会这样做，但那是一个完全不同的处理程序。这就是
{once:true}
所做的。你在期待什么？