如何点击侧边栏外部时关闭侧边栏？已实现按钮关闭功能

下面提供几种实用的解决方案，帮你避免点击打开按钮时意外触发侧边栏关闭：

方法1：阻止打开按钮的事件冒泡 #

点击打开按钮时，阻止事件向上传递到body，这样body绑定的关闭事件就不会被触发：

// 绑定打开按钮点击事件
document.querySelector('.ed-micon').addEventListener('click', function(e) {
  e.stopPropagation(); // 阻止事件冒泡到body
  document.querySelector('.ed-mm-inn').classList.add('ed-mm-act');
});

// 绑定关闭按钮点击事件
document.querySelector('.ed-mi-close').addEventListener('click', function() {
  document.querySelector('.ed-mm-inn').classList.remove('ed-mm-act');
});

// body点击关闭侧边栏
document.body.addEventListener('click', function() {
  document.querySelector('.ed-mm-inn').classList.remove('ed-mm-act');
});

方法2：判断点击目标的归属范围 #

在body的点击事件中，检查点击的元素是否属于侧边栏或打开按钮（包括它们的子元素），如果是则不执行关闭操作：

const sidebar = document.querySelector('.ed-mm-inn');
const openBtn = document.querySelector('.ed-micon');

// 打开侧边栏
openBtn.addEventListener('click', function() {
  sidebar.classList.add('ed-mm-act');
});

// 关闭侧边栏
document.querySelector('.ed-mi-close').addEventListener('click', function() {
  sidebar.classList.remove('ed-mm-act');
});

// body点击事件处理
document.body.addEventListener('click', function(e) {
  // 点击目标不是打开按钮，也不在侧边栏内部时，关闭侧边栏
  if (e.target !== openBtn && !sidebar.contains(e.target)) {
    sidebar.classList.remove('ed-mm-act');
  }
});

方法3：结合侧边栏状态判断 #

先判断侧边栏是否处于打开状态，再结合点击目标判断是否需要关闭，减少不必要的操作：

const sidebar = document.querySelector('.ed-mm-inn');
const openBtn = document.querySelector('.ed-micon');
const closeBtn = document.querySelector('.ed-mi-close');

openBtn.addEventListener('click', function() {
  sidebar.classList.add('ed-mm-act');
});

closeBtn.addEventListener('click', function() {
  sidebar.classList.remove('ed-mm-act');
});

document.body.addEventListener('click', function(e) {
  // 只有侧边栏打开时才进行判断
  if (sidebar.classList.contains('ed-mm-act')) {
    if (e.target !== openBtn && !sidebar.contains(e.target)) {
      sidebar.classList.remove('ed-mm-act');
    }
  }
});

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