JavaScript 显示隐藏Toggle：如何实现点击容器外也隐藏指定DIV？

改动逻辑梳理 #

• 给「Try it」触发文本增加唯一id，方便识别点击来源
• 在原切换函数中增加事件冒泡拦截，避免点击触发按钮时的点击事件传递到页面全局，导致刚显示的div被全局逻辑误隐藏
• 新增全局点击监听：当用户点击的区域既不是触发按钮、也不在#myDIV容器内部时，直接将#myDIV设置为隐藏状态

可直接替换使用的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
/* 优化触发文本的可点击提示 */
#toggleBtn {
  cursor: pointer;
  display: inline-block;
}
</style>
</head>
<body>
<span id="toggleBtn" onclick="myFunction(event)">Try it</span>
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myFunction(e) {
  const targetDiv = document.getElementById("myDIV");
  // 阻止事件冒泡，避免触发全局隐藏逻辑
  e.stopPropagation();
  if (targetDiv.style.display === "none") {
    targetDiv.style.display = "block";
  } else {
    targetDiv.style.display = "none";
  }
}

// 全局监听实现点击外部自动隐藏
document.addEventListener('click', function(e) {
  const targetDiv = document.getElementById("myDIV");
  const toggleBtn = document.getElementById("toggleBtn");
  // 点击区域不在div内部、且不是触发按钮时，隐藏div
  if (!targetDiv.contains(e.target) && e.target !== toggleBtn) {
    targetDiv.style.display = "none";
  }
})
</script>
</body>
</html>

调试注意事项 #

• 必须在原点击事件中传入event对象并调用stopPropagation()：缺少这一步时，点击触发按钮的事件会冒泡到document层级，触发全局监听的隐藏逻辑，出现“点了按钮div刚显示就立刻消失”的失效问题
• 用contains()方法判断点击来源，可以兼容div内部所有子元素的点击交互，不需要单独为div内的每个元素添加拦截逻辑
• 原代码基于内联样式判断显示状态的逻辑可以保留，因为所有显示、隐藏的状态变更都是通过JS直接修改内联样式实现的，不会出现状态判断错误

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