如何实现点击元素外部区域时重置DOM元素className属性

已实现成员列表点击样式切换交互：点击列表内某一项时，修改元素className属性，实现当前点击项高亮、同组其余元素置灰的效果，原有实现代码如下：

const memberB = document.querySelectorAll('#memberBoxAlex, 
#memberBoxLiv, #memberBoxFlo');
for (let i = 0; i < memberB.length; i++) 
memberB[i].onclick = function(){
memberBoxAlex.className = "faded";
memberBoxLiv.className = "faded";
memberBoxFlo.className = "faded";

if(memberB[i].className=="open"){
    memberB[i].className="";
}
else{
    memberB[i].className="open";
}

现需追加交互：点击成员盒子外部区域时清除全部激活效果，所有memberB元素恢复初始状态，即设置className=""。此前尝试给父容器绑定点击事件实现该需求，测试代码如下：

let exitEffect = document.getElementById(team)
exitEffect.onclick = function(){
memberBoxAlex.className = "";
memberBoxLiv.className = "";
memberBoxFlo.className = "";}

该方案未达到预期效果。

之前的方案失效核心是DOM事件冒泡机制：点击成员盒子时，点击事件会从当前点击的成员元素向上逐层冒泡到父元素，导致点击成员项时也会触发父容器绑定的清空逻辑，和成员项本身的点击切换逻辑冲突。

• 给所有成员项的点击事件添加阻止冒泡逻辑，点击成员项时不让事件向上传递，避免误触发外层的清空方法
• 封装统一的样式重置方法，减少重复代码
• 在外层绑定点击事件，触发时执行重置方法即可
  • 如果需要点击页面任意非成员盒子区域都触发重置，就把事件绑定在document上
  • 如果仅需要点击成员盒子所在父容器内的外部区域才触发重置，就把事件绑定在对应父容器上

const memberB = document.querySelectorAll('#memberBoxAlex, #memberBoxLiv, #memberBoxFlo');
// 封装统一重置方法
const resetAllMemberClass = () => {
  memberB.forEach(item => item.className = "");
}

// 绑定成员项点击事件
for (let i = 0; i < memberB.length; i++) {
  memberB[i].onclick = function(e) {
    // 阻止事件冒泡，避免触发外层清空逻辑
    e.stopPropagation();
    // 先将所有元素置为faded状态
    memberB.forEach(item => item.className = "faded");
    // 切换当前项状态
    memberB[i].className = memberB[i].className === "open" ? "" : "open";
  }
}

// 全局点击时重置所有样式，如需限定父容器范围可替换document为对应父容器元素
document.onclick = resetAllMemberClass;

注：原成员项绑定事件的循环未添加花括号包裹逻辑块，建议补上避免后续新增代码时出现作用域或逻辑归属问题。

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