如何实现点击侧边栏（sidebar）外部时使其隐藏的功能？

要实现这个需求，我们可以给整个文档添加点击事件监听，在回调里判断点击的目标是否属于侧边栏内部或者触发侧边栏开关的元素——如果都不属于，且侧边栏当前是显示状态，就把它隐藏。同时要注意阻止侧边栏开关按钮的事件冒泡，避免刚打开就被关闭。

修改后的完整代码 #

var mySidebar = document.getElementById("mySidebar");
// 假设你的侧边栏开关按钮id是s4_btn，根据实际情况修改
var toggleBtn = document.getElementById("s4_btn");

function s4_open(event) {
  // 阻止事件冒泡，避免触发文档的点击事件
  event.stopPropagation();
  if (mySidebar.style.display === 'block') {
    mySidebar.style.display = 'none';
  } else {
    mySidebar.style.display = 'block';
  }
}

// 监听文档的点击事件
document.addEventListener('click', function(event) {
  // 判断点击的元素是否不是侧边栏，也不是开关按钮
  if (!mySidebar.contains(event.target) && event.target !== toggleBtn) {
    // 如果侧边栏当前是显示状态，就隐藏它
    if (mySidebar.style.display === 'block') {
      mySidebar.style.display = 'none';
    }
  }
});

关键说明 #

• event.stopPropagation()：在开关按钮的点击事件里添加这个方法，是为了防止点击按钮时，事件冒泡到document上，导致刚打开侧边栏就被立刻隐藏。
• mySidebar.contains(event.target)：用来判断点击的元素是否是侧边栏内部的元素（包括侧边栏本身），如果是，就不执行隐藏逻辑。
• 要确保你正确获取到开关按钮的DOM元素，代码里的s4_btn是假设的id，需要替换成你实际使用的按钮id。

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