Javascript 在另一个单击事件之后添加单击事件

我正试图在附加到按钮的另一个单击事件中向文档添加一个单击事件。但是，第二次单击事件会立即触发，就像事件重叠一样。我考虑过停止传播，使用超时，删除侦听器，

preventDefault（）

，但没有成功

这是我正在尝试做的一个例子

document.getElementById("test").addEventListener('click', first);

function first(){
    document.addEventListener('click', second);
}
function second(){
    alert("I'm not suppose to appear after the first click, only the second.");
}

对于测试，我使用一个简单的按钮

<button type="button" id="test">Click</button>

点击

---

我在没有JQuery的情况下做这件事。这可能吗？

您可以使用一个变量来记录点击次数

document.getElementById("test").addEventListener('click', clickHandler);

var clickCount=0;
function clickHandler(event){
  clickCount++;
  if(clickCount==2){
    event.target.removeEventListener("click");
    document.addEventListener('click', function(){
      alert("I'm not suppose to appear after the first click, only the second.");
    });
  }
}

如果您不想使用全局变量，可以使用dataset，使用以下内容制作一个按钮：

<button type="button" id="test" data-clickcount="0">Click</button>

---

尝试使用

event.stopImmediatePropagation（）

document.getElementById（“测试”）.addEventListener（“首先单击”）；
职能优先（e）{
e、 停止即时复制（）；
这个.removeEventListener（“单击”，首先）；
document.onclick=second；
}
函数第二（）{
警报（“我不想在第一次点击后出现，只想在第二次点击后出现。”）；
}

---

单击

是否应将第二个事件侦听器附加到同一个“测试”元素？是否也可以发布相关标记？Olivier，不需要将我正在尝试的操作附加到整个文档，无论您在何处单击它都将触发下一个事件。Hanlet，标记是发布的，非常简单：）这是由于事件冒泡：（事件被转发到更高级别）所以发生了这种情况：1）单击按钮上的事件2）将事件侦听器附加到主体3）单击事件被转发到主体（现在有一个事件侦听器）天哪。为什么我如此无知。有价值的信息，我不知道什么是冒泡。非常感谢！啊，我不知道还有另一个传播停止事件。这似乎是我所希望的答案。不过，在接受之前，我会等一段时间，看看是否还有其他问题。谢谢大家!@AlexanderWeihmayer见更新帖子；使用

.one（）

添加了jQuery方法。JQuery确实让生活变得更轻松，但DIY有一点很酷：）@AlexanderWeihmayer更新了pure

js

solution

second

现在在第二次点击

#test

时调用。谢谢，您给出的答案看起来非常直截了当且有效，我会接受的。@valepu您也可以使用函数属性：

clickHandler。单击计数

。哦，还有更多我不知道的事情。谢谢：）但是，这种设置方式只会触发按钮本身，而我希望第二次单击会触发整个文档。我的坏消息是，没有注意到eventlistener目标，但我可以解决它。谢谢您的解决方案，但是guest271314的方法非常简单。不过，我肯定会记住这些窍门，谢谢你给我的信息：）别担心！我不质疑品味，只是很高兴能帮上忙。请注意stopimmediatepropagation，因为它可能会中断上层的其他单击事件（因为事件冒泡），所以如果您将按钮放在一个（比方说）附加了另一个eventhandler的内部，它将不会触发

document.getElementById("test").addEventListener('click', clickHandler);

function clickHandler(event){
  event.target.dataset.clickcount++;
  if(event.target.dataset.clickcount==2){
    event.target.removeEventListener("click");
    document.addEventListener('click', function(){
      alert("I'm not suppose to appear after the first click, only the second.");
    });
  }
}