如何处理容器内事件元素？点击btnToggle导航有时生效有时失效

问题根因 #

.header__btn-toggle 容器内部存在3个用于实现汉堡菜单样式的子<div>元素，当点击位置落在子元素上时，事件触发对象e.target为内部子元素，不满足e.target.className == "header__btn-toggle"的判断条件，会直接触发else逻辑隐藏导航栏，因此出现点击偶发失效的问题。
同时用className全等判断本身也存在隐患：后续如果给按钮追加其他类名，判断逻辑会直接失效。

修复方案 #

推荐用Element.closest()方法判断点击目标是否隶属于按钮容器，不管点击到子元素还是外层容器都能正常命中，修改后的代码如下：

const nav = document.querySelector(".header-nav");
const btnToggle = document.querySelector(".header__btn-toggle");
document.addEventListener("click", (e) => {
  if (e.target.closest(".header__btn-toggle")) {
    nav.style.right = "0";
  } else {
    nav.style.right = "-100%";
  }
})

可选优化 #

如果不需要实现「点击页面其他区域自动收起导航」的交互，直接给切换按钮单独绑定点击事件即可，逻辑更简洁也不会出现点击命中问题：

const nav = document.querySelector(".header-nav");
const btnToggle = document.querySelector(".header__btn-toggle");
btnToggle.addEventListener("click", () => {
  nav.style.right = nav.style.right === "0" ? "-100%" : "0";
})

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