JS菜单问题与preventDefault谁关闭我的菜单

Question

这是我多年来阅读这里的答案后，在Stackoverflow上提出的第一个问题。对不起，我的英语不是我的母语。

我在wordpress上开发了一个打开、关闭菜单和打开子菜单的系统。

当我打开子菜单时，我的菜单会关闭，尽管我阻止点击标签

let openMenu = document.querySelectorAll('.et_mobile_menu .menu-item-has-children>a');
let arrayLinkMenu = Array.from(openMenu);
for(let i = 0; i < arrayLinkMenu.length; i++){
arrayLinkMenu[i].addEventListener('click', (event) => {
arrayLinkMenu[i].nextElementSibling.style.setProperty('display', 'block', 'important');
event.preventDefault();
event.stopPropagation();
})
}

我试过使用return false，但遇到了同样的问题。

当我单击时，它会创建一个以#为URL的a标记。我的页面刷新是这样的，但不是。。。我从来没有看到我的网络浏览器真正刷新我的页面。

我把打开和关闭菜单的代码，我们永远不知道

/**If menu is open create div with button close menu and add interation to submenu*/
//Verify the click on the button
let buttonMenu = document.getElementsByClassName('mobile_nav');
buttonMenu[0].addEventListener('click', function(){
let menuClosed = document.getElementsByClassName('closed-menu');
if (menuClosed.length > 0){
menuClosed[0].remove();
}
//if it' open create div or a tag
if(!buttonMenu[0].classList.contains('opened')){
let aTag = document.createElement('a');
aTag.href = '#';
aTag.innerHTML = '<img src="url_image" />';
aTag.classList.add('closed-menu')
let mobileMenu = document.getElementsByClassName('et_mobile_menu');
mobileMenu[0].appendChild(aTag);

//create action to close menu
let menuClosed = document.getElementsByClassName('closed-menu');
if(menuClosed.length > 0){
let mobileNav = document.getElementsByClassName('mobile_nav')
menuClosed[0].addEventListener('click', function(event){
mobileNav[0].classList.remove('opened');
mobileNav[0].classList.add('closed');
event.preventDefault();
})
}


//click on menu with subMenu
let openMenu = document.querySelectorAll('.et_mobile_menu .menu-item-has-children>a');
let arrayLinkMenu = Array.from(openMenu);
for(let i = 0; i < arrayLinkMenu.length; i++){
arrayLinkMenu[i].addEventListener('click', (event) => {
arrayLinkMenu[i].nextElementSibling.style.setProperty('display', 'block', 'important');
event.preventDefault();
event.stopPropagation();
return false;
})
}

}else{
// take an ellement and remove it to not have many ellements on same menu
let menuClosed = document.getElementsByClassName('closed-menu');
if (menuClosed.length > 0){
menuClosed[0].remove();
}
}

})  

谢谢每次预付。

Answer 1

尝试stopImmediatePropagation()，这样就可以确保即使在元素本身上注册的其他事件侦听器也不会被执行。