Javascript事件侦听器覆盖另一个事件侦听器

因此，我试图为移动设备创建一个多级导航，我遇到了一些问题。我仍在学习javascript，请与我分享。以下是代码笔的链接：

因此，当您按下右上角的菜单时，菜单将向下打开。然后，我希望能够进入子类别。例如，单击“测试打开”。。将分配活动类，并滑入另一个菜单。现在，我想有一个返回按钮，它基本上删除了.active类

不管我认为发生了什么，事件侦听器都会侦听整个父级，并且无论您在子导航中单击什么位置，它都会将其注册为单击，并运行.active类。当我单击返回时，它的like.active被删除并立即应用回。需要帮忙吗

我试过做这个事件。当前事件！==event.target if语句，但没有运气

const nav=document.getElementById（'menuIcon'））
const dropdown=document.getElementById（'menuDropdown'）
nav.addEventListener（'click'，function（）{
下拉列表.classList.toggle（'nav-is-toggled'）
});
const grabNavLinks=document.querySelectorAll（'.sub-nav-link'）；
const grabBackLinks=document.querySelectorAll（'.nav link.back'）；
const subNavLinks=Array.from（grabNavLinks）；
const backLinks=Array.from（grabBackLinks）；
for（设i=0；i

@导入url（“https://fonts.googleapis.com/css2?family=Open+SAN:wght@300；400；600；700&display=swap”）；
* {
框大小：边框框；
}
身体{
保证金：0；
填充：0；
字体系列：“开放式sans”，无衬线；
背景#F9F9F9；
框大小：边框框；
}
a、 p，h1，h2，h3{
保证金：0；
填充：0；
文字装饰：无；
}
李先生{
填充：0；
保证金：0；
}
标题{
背景：白色；
填充：24px 30px；
显示器：flex；
弯曲方向：立柱；
z指数：10；
位置：相对位置；
}
.顶部导航{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
.顶部导航标志{
背景：url（“images/tcb logo brand.svg”）不重复；
宽度：150px；
高度：50px；
背景尺寸：包含；
背景位置：中心；
}
.顶部导航{
显示器：flex；
证明内容：之间的空间；
宽度：132px；
高度：26px；
}
.顶部导航.导航.导航项目{
宽度：23px；
高度：26px；
左边距：10px；
背景重复：无重复；
背景位置：中心；
背景尺寸：包含；
}
.顶部导航.导航.导航项.菜单{
背景图像：url（“图像/菜单图标.svg”）；
}
.顶部导航.导航.导航项目.通知{
背景图像：url（“images/bell-icon.svg”）；
}
.顶部导航.导航.导航项目.我的帐户{
背景图像：url（“images/acc icon.svg”）；
}
.搜索{
边缘顶部：16px；
}
.search输入[类型=搜索]{
大纲：无；
边界：无；
背景：#F6F6F6；
宽度：100%；
高度：50px；
字体大小：16px；
填充：10px 0 10px 20px；
背景图像：url（“images/search icon.svg”）；
背景重复：无重复；
背景位置：右15px上50%；
}
.search输入[类型=搜索]：：占位符{
颜色：#b7b7；
}
span.nav-title{
显示：无；
}
主导航{
宽度：100%；
背景：#F6F6F6；
转换：translateY（-100%）；
z指数：0；
位置：相对位置；
过渡：所有0.3秒的缓进缓出；
位置：绝对位置；
填充底部：50px；
溢出：隐藏；
}
nav.main-nav ul{
垫顶：2件；
位置：相对位置；
}
主导航-导航李{
列表样式：无；
}
主导航-主导航a{
颜色：#6D6D；
字体大小：16px；
宽度：100%；
身高：100%；
显示：块；
填充：18px 30px；
边框底部：1px实心#E9E9E9；
}
nav.main-nav li.nav-link.arrow{
背景：url（“images/right arrow.svg”）不重复；
背景位置：右30px上50%；
}
主导航-副导航{
背景:#塞切奇；
宽度：100%；
显示器：flex；
弯曲方向：立柱；
转化：translateX（100%）；
溢出：隐藏；
可见性：隐藏；
不透明度：0；
位置：绝对位置；
排名：0；
左：0；
转换：转换0.2秒；
}
.sub-nav链接>.sub-nav.active{
变换：translateX（0）；
能见度：可见；
不透明度：1；
}
导航。导航已切换{
位置：静态；
不透明度：1；
变换：translateY（0）；
过渡：所有0.3秒的缓进缓出；
}

测试
我的帐户

阅读事件冒泡以及它如何在DOM树中冒泡。但是，由于它从父级传递到子级的方式（即它在树上冒泡），您应该调用

event.stopPropagation（）

以便前一个事件不会冒泡进入

反向链接

事件侦听器

这是你应该做的

for (let i = 0; i < backLinks.length; i++) {
  backLinks[i].addEventListener("click", function(event) {
    event.stopPropagation();
    document.querySelector('.sub-nav').classList.remove('active');
  });
}

for（设i=0；i