Javascript 防止子元素在子菜单项单击时触发父事件

我试图创建一个侧边栏菜单，在父项单击时触发子菜单-这一切都很好，但是，当我单击子项/子菜单项时，父类崩溃

我试过使用

e.stopPropogation（）但这似乎不起作用。请参阅下面的代码


var menu=document.getElementById（'menu'）；
document.querySelectorAll（'.item'）.forEach（（i）=>{
i、 addEventListener（'单击'，（ev）=>{
ev.stopPropagation（）；
ev.preventDefault（）；
i、 querySelector（'.submenu'）.classList.toggle（'submenu-active'）；
});
});
*{
保证金：0；
填充：0；
}
.标志{
z指数：0；
}
#航行{
位置：相对位置；
}
#菜单{
背景色：#fff；
宽度：90%；
位置：固定；
z指数：1；
过渡：0.25s；
排名：0；
身高：100%；
溢出y：滚动；
-网络工具包盒阴影：0px 0px 2px 1px rgba（0,0,0,0.5）；
-moz盒阴影：0px 0px 2px 1px rgba（0,0,0,0.5）；
盒影：0px 0px 2px 1px rgba（0,0,0,0.5）；
}
#菜单项{
列表样式：无；
填充：.6rem.8rem；
背景颜色：蓝色；
颜色：#fff；
边框底部：1px实心#fff；
}
.子菜单{
显示：无；
背景色：深蓝色；
填充：无；
}
.子菜单li{
列表样式：无；
}
.菜单激活{
过渡：0.5s；
左：0！重要；
}
.子菜单处于活动状态{
显示：块；
}


第1项

S1
S2
S3


第2项

S1
S2
S3


第3项

S1
S2
S3


第4项

S1
S2
S3


第5项

S1
S2
S3



菜单
您需要在
子菜单中使用
停止播放
。单击子菜单
而不是单击父菜单


$（文档）
.on（'click'，'item'，函数（e）{
$（this）.find（'.submenu'）.toggleClass（'submenu-active'）；
})
.on（'单击'，'子菜单'，函数（e）{
e、 停止传播（）；
});
*{
保证金：0；
填充：0；
}
.标志{
z指数：0；
}
#航行{
位置：相对位置；
}
#菜单{
背景色：#fff；
宽度：90%；
位置：固定；
z指数：1；
过渡：0.25s；
排名：0；
身高：100%；
溢出y：滚动；
-网络工具包盒阴影：0px 0px 2px 1px rgba（0,0,0,0.5）；
-moz盒阴影：0px 0px 2px 1px rgba（0,0,0,0.5）；
盒影：0px 0px 2px 1px rgba（0,0,0,0.5）；
}
#菜单项{
列表样式：无；
填充：.6rem.8rem；
背景颜色：蓝色；
颜色：#fff；
边框底部：1px实心#fff；
}
.子菜单{
显示：无；
背景色：深蓝色；
填充：无；
位置：相对位置；
z指数：10；
}
.子菜单li{
列表样式：无；
}
.菜单激活{
过渡：0.5s；
左：0！重要；
}
.子菜单处于活动状态{
显示：块；
}


第1项

S1
S2
S3


第2项

S1
S2
S3


第3项

S1
S2
S3


第4项

S1
S2
S3


第5项

S1
S2
S3



菜单
谢谢你的回答！有没有一种简单的方法可以使用JavaScript实现这一点？如果您有嵌套的单击，那么您需要停止事件传播。如果使用JS，则需要为子类添加侦听器，并在其中调用
stopPropagation（）
Solved document.queryselectoral（'.submenu'）.forEach（（i）=>{i.addEventListener（'click'，（ev）=>{ev.stopPropagation（）；}）；