如何用纯JS实现点击目标元素外部时隐藏该元素？

没问题，我帮你把这个需求用纯JS搞定，效果和你参考的jQuery版本一模一样，核心思路是监听全局点击事件，但排除掉按钮和目标元素本身的点击行为，同时阻止事件冒泡避免冲突。

实现思路 #

• 保留你原有的切换逻辑，但需要给按钮和目标元素#ex添加阻止事件冒泡的处理，不然点击它们的时候，事件会传到document导致元素刚显示就被隐藏。
• 给document添加点击事件，当点击的区域不是按钮也不是#ex时，直接隐藏#ex。

完整实现代码 #

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#ex{ display: none; } 
</style> 
<script> 
document.addEventListener('DOMContentLoaded',function(){ 
  var b = document.getElementsByTagName('button')[0]; 
  var x = document.getElementById("ex"); 

  // 按钮点击切换显示/隐藏，同时阻止事件冒泡
  b.addEventListener('click', function(event) {
    event.stopPropagation();
    fx();
  }); 

  // 点击#ex本身时阻止事件冒泡，避免触发document的隐藏逻辑
  x.addEventListener('click', function(event) {
    event.stopPropagation();
  });

  // 切换显示状态的核心函数
  function fx() { 
    if (x.style.display === "block") { 
      x.style.display = "none"; 
    } else { 
      x.style.display = "block"; 
    } 
  } 

  // 点击document其他区域时隐藏#ex
  document.addEventListener('click', function() {
    x.style.display = "none";
  });
}); 
</script> 
</head> 
<body> 
<button>Toggle</button> 
<h1 id="ex">Blablablablabla bla bla JS</h1> 
</body> 
</html>

关键细节说明 #

• event.stopPropagation()：这个方法会阻止事件向上冒泡到父元素，所以点击按钮或#ex时，不会触发document的点击事件，避免刚显示就被隐藏的问题。
• 健壮性优化：如果你的按钮或#ex内部有子元素（比如下拉菜单里的选项），直接判断event.target可能不准确，这时候可以用Element.contains()方法来检查点击目标是否属于按钮或#ex的子元素：

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

  这样即使点击的是按钮或#ex的子元素，也不会触发隐藏逻辑，更符合实际场景。

内容的提问来源于stack exchange，提问作者user9375528