如何知道多级菜单事件冒泡的逻辑

Question

我试图了解我的基本多级菜单单击事件中发生的逻辑。 我了解单击导航中的“关于”菜单会发生什么。 它按照我对代码的期望工作。 但是当我点击“个人资料”菜单（“关于”菜单的子菜单）时，JS 使它的子菜单“显示：无”。 我试着从冒泡的角度思考。 但是即使冒泡发生在这里，它也不应该像这样工作。 实际上对我来说，理解 JS 在这里是如何工作的真的很复杂。 如果有人能用简单易懂的方式解释，那将是一个很大的帮助。 非常感谢您提前！

 let menus = document.querySelectorAll(".main-navigation ul li a"); menus.forEach((item) => { if (item.parentElement.querySelector("ul")) { item.parentElement.classList.add("has-submenu"); } }); let submenu = document.querySelectorAll(".has-submenu"); submenu.forEach((item) => { item.addEventListener("click", (e) => { e.preventDefault(); let ul = e.target.parentElement.querySelector("ul"); let cs = window.getComputedStyle(ul).display; if (cs === "none") { ul.style.cssText = "display:block"; } else { ul.style.cssText = "display:none"; } }); });

 .main-navigation ul {list-style:none;margin:0;padding:0;font-family:arial;} .main-navigation ul li {padding:.35rem;background:#f9f9f9;} .main-navigation ul li ul {padding-left:1rem;display:none;} .main-navigation ul li a {display:block;text-decoration:none;}

 <div class="main-navigation"> <ul> <li><a href="">Home</a></li> <li><a href="">About +</a> <ul> <li><a href="">Profile +</a> <ul> <li><a href="">History</a></li> <li><a href="">Management</a></li> </ul> </li> <li><a href="">Vision</a></li> <li><a href="">Mission</a></li> </ul> </li> <li><a href="">Services +</a> <ul> <li><a href="">Web Design</a></li> <li><a href="">Web Development</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </div>

Answer 1

解决方案

如果在click处理程序中添加console.log ，您会注意到嵌套项的事件被调用了两次。

您可能知道它可能发生，并且您使用了preventDefault 。

但是， preventDefault用于浏览器的默认效果（例如，它会在您放置href属性时阻止您的页面刷新），但在您的情况下，双重行为来自您自己的自定义侦听器。

这意味着，您需要添加stopPropagation以防止当前事件在捕获和冒泡阶段进一步传播。

工作演示

 let menus = document.querySelectorAll(".main-navigation ul li a"); menus.forEach((item) => { if (item.parentElement.querySelector("ul")) { item.parentElement.classList.add("has-submenu"); } }); let submenu = document.querySelectorAll(".has-submenu"); submenu.forEach((item) => { item.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); let ul = e.target.parentElement.querySelector("ul"); let cs = window.getComputedStyle(ul).display; if (cs === "none") { ul.style.cssText = "display:block"; } else { ul.style.cssText = "display:none"; } }); });

 .main-navigation ul { list-style: none; margin: 0; padding: 0; font-family: arial; } .main-navigation ul li { padding: .35rem; background: #f9f9f9; } .main-navigation ul li ul { padding-left: 1rem; display: none; } .main-navigation ul li a { display: block; text-decoration: none; }

 <div class="main-navigation"> <ul> <li><a href="">Home</a></li> <li><a href="">About +</a> <ul> <li><a href="">Profile +</a> <ul> <li><a href="">History</a></li> <li><a href="">Management</a></li> </ul> </li> <li><a href="">Vision</a></li> <li><a href="">Mission</a></li> </ul> </li> <li><a href="">Services +</a> <ul> <li><a href="">Web Design</a></li> <li><a href="">Web Development</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </div>