如何知道多級菜單事件冒泡的邏輯

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>