Javascript 如何使addEventListener在关闭div之前工作一次？

所以。我有一个按钮，可以更改div->spotPopUp的可见性。 我制作了一个eventlistener来简单地更改div的可见性（hidd变为visible等等） 问题出在哪里？
如何使按钮只能按下一次，直到按下“取消”或“提交”？ 当我应用removeEventListener时，它在调用函数时不会被添加回来

var spot=document.getElementById（“spot”）；
spot.addEventListener（“单击”，spotClick）；
函数spotClick（）{
spot.addEventListener（“单击”，spotClick）；
let popUp=document.getElementById（“spotPopUp”）；
如果（popUp.style.visibility==“可见”）{
popUp.style.visibility=“隐藏”；
}否则{
popUp.style.visibility=“可见”；
}
spot.removeEventListener（“单击”，spotClick）；
}

添加标记
取消

添加标记

您将向按钮添加两次

单击处理程序，但仅删除一次。删除第二个添加的处理程序，它就会工作


var spot=document.getElementById（“spot”）；
spot.addEventListener（“单击”，spotClick）；
函数spotClick（）{
//addEventListener（“click”，spotClick）；您的问题是，当您调用Cancel元素上的
spotClick（）
时，它最终将删除事件侦听器，因为这实际上是其中的最后一个命令

对于这两次单击，您需要的是不同的功能。首先，您的
spotClick（）
只应使弹出窗口可见，而与隐藏无关，同时删除事件侦听器：

function spotClick() {
  document.getElementById("spotPopUp").style.visibility = "visible";
  spot.removeEventListener("click", spotClick);
}

function cancelClick() {
  document.getElementById("spotPopUp").style.visibility = "hidden";
  spot.addEventListener("click", spotClick);
}

然后，您需要一个单独的函数来隐藏它并重新连接事件侦听器：

function spotClick() {
  document.getElementById("spotPopUp").style.visibility = "visible";
  spot.removeEventListener("click", spotClick);
}

function cancelClick() {
  document.getElementById("spotPopUp").style.visibility = "hidden";
  spot.addEventListener("click", spotClick);
}

完整片段：


var spot=document.getElementById（“spot”）；
spot.addEventListener（“单击”，spotClick）；
函数spotClick（）{
document.getElementById（“spotPopUp”）.style.visibility=“可见”；
spot.removeEventListener（“单击”，spotClick）；
}
函数cancelClick（）{
document.getElementById（“spotPopUp”）.style.visibility=“hidden”；
spot.addEventListener（“单击”，spotClick）；
}

添加标记
取消

添加标记

我有一个按钮可以打开一个div，好吧，我们就到此为止。那“打开一个div”是什么意思？另外，请更新您的问题，以包括相关的HTML和CSS以及JavaScript。@Scott Marcus By opens he means displays，根据第二句话。@Marius-N如果我理解正确，您希望只触发一次单击事件，然后删除该事件，直到单击属于您的div的其他按钮为止可见？@El_Vanja是的。如果我从spotPopUp div中按下取消或提交按钮，我希望能够再次使用该eventlistener。（spot.addEventListener（“单击”，spotClick）；）您拼错了
removeEventListener（）
。我尝试了此操作，但仍然能够“关闭”弹出窗口使用相同的按钮。
我希望此按钮仅“打开”弹出窗口，而不关闭弹出窗口。多次单击不起作用。事件处理程序未重新连接。@Marius-N查看我的更新答案。我的第一个示例回答了您关于为什么
removeEventListener（）的问题
不起作用-这就回答了你的主要问题。我的第二个示例演示了如何使整个过程按你想要的方式运行。@El_Vanja查看我的更新答案。我的第一个示例回答了为什么
removeEventListener（）的问题
不起作用-这就回答了您的主要问题。我的第二个示例演示了如何使整个过程按其应有的方式运行。第二个代码片段没有删除事件处理程序，仍然允许使用“添加点”按钮切换弹出框。我建议您将解决方案合并为一个涵盖所有问题的解决方案。我同意您的所有建议关于如何使代码更干净，我只是不想压倒OP。当我们讨论这个问题时，那些
let
s应该是
const
s，因为它们从来没有被重新分配过。所以我只是把自己复杂化了一些不起作用的东西。非常感谢。这可能“起作用”，但这是完全错误的方法。此外，您对问题的解释是错误的。
addEventListener
被添加了两次，而
removeEventListener（）
只被调用一次，因此即使在调用remove之后，按钮上仍然有一个侦听器。