Javascript 添加第二个addEventListener（）会中断第一个

我在加载时隐藏了一个p，然后单击按钮应该会显示它，之后单击其他位置将隐藏它

我可以隐藏它，然后在单击按钮时显示它，但当我添加另一个addEventListener以在单击任何位置时隐藏它时，它会将其破坏

html:

---

这是因为事件侦听器会弹出气泡，因此如果单击按钮，整个文档也会被单击。因此，当您第一次单击该按钮时，监听器会附加到文档，然后每当您单击它时，两个监听器都会被触发撤消彼此的更改

您可以让内部处理程序只触发一次，以避免污染事件处理程序列表：

 btn.addEventListener('click', function() {
  p.style.display = "block"

  document.addEventListener('click', function() {
    p.style.display = "none" 
  }, { once: true });
});

如果不希望再次单击按钮以不再隐藏段落，可以防止事件冒泡：

 btn.addEventListener(function (event) {
   event.stopPropagation();
   //...
 });

---

当您在文档上添加eventlistener时，无论何时单击按钮，它都会触发，因为按钮也是文档的一部分，当您单击按钮时，您会间接单击文档

试着这样做

var btn = document.getElementById('btn')
var p = document.getElementById('p')

p.style.display = "none"

btn.addEventListener('click', function() {
  p.style.display = "block"
})
document.addEventListener('click', function(event) {
  if(event.target !== btn){
    p.style.display = "none"    
  }

});

查看工作表

---

更新

要防止文本在单击

时隐藏，请在

if

语句中添加另一个条件

document.addEventListener('click', function(event) {
  if(event.target !== btn && event.target !== p){
    p.style.display = "none"    
  }
});

---

每次单击要在

文档上添加另一个单击处理程序的按钮时

“内部处理程序只能附加一次”：

一次：true

不会阻止脚本在文档上添加多个单击处理程序。它只会在处理程序执行一次/第一次后“强制”浏览器删除处理程序。+1正确答案，此处进行轻微调整->因此您不必再次查询文档的ID，而是使用存储的

btn

var。谢谢，这起到了作用，我现在理解了我的问题。但我仍然需要它，当你点击p标签时，什么也没发生。只在单击其他位置时隐藏它，我已经尝试了一个小时，没有任何进展（明白了！！

如果（event.target！==btn&&event.target！=p）{

再次感谢：）

var btn = document.getElementById('btn')
var p = document.getElementById('p')

p.style.display = "none"

btn.addEventListener('click', function() {
  p.style.display = "block"
})
document.addEventListener('click', function(event) {
  if(event.target !== btn){
    p.style.display = "none"    
  }

});

document.addEventListener('click', function(event) {
  if(event.target !== btn && event.target !== p){
    p.style.display = "none"    
  }
});