предотвратить появление по умолчанию на неправильном элементе, а mouseleave / mouseout дают противоречивый ответ

Question

Я пытался создать работоспособный фрагмент, но это делается в WordPress, и в настоящее время я не могу.

Вот что мы пытаемся сделать. У нас есть меню из 5 пунктов. Они отображаются в линейном блоке. На двух из пяти пунктов у нас есть подменю, отображаемое в блоке. Для этих двух элементов мы хотим отключить событие click, но при этом навести курсор мыши, а при наведении мыши отобразить подменю и изменить нижнее поле панели навигации. Событие click должно работать с элементами подменю. При отпуске мышью нам нужно изменить нижнее поле обратно на 0px.

Структура меню следующая:

<div class="navbar">
   <ul class="main-menu">
      <li><a href="https:\\google.com">Home</a></li>
      <li class="aboutUs">About Us
         <ul class='sub-menu'>
            <li><a href="https:\\yahoo.com">Home</a>Our Story</a></li>
            <li><a href="https:\\yahoo.com">SWAG Leaders</a></li>
            <li><a href="https:\\yahoo.com">In The News</a></li>
          </ul>
</li>
      <li><a href="https:\\google.com">Our Work</a></li>
      <li><a href="https:\\google.com">Calendar</a></li>
      <li class="takeAction">Take Action
         <ul class='sub-menu'>
            <li><a href="https:\\yahoo.com">Home Improvement</a></li>
            <li><a href="https:\\yahoo.com">Get Involved</a></li>
            <li><a href="https:\\yahoo.com">Resources</a></li>
            <li><a href="https:\\yahoo.com">Donate</a></li>
          </ul>
</li>
</div> 

, а вот JS:

function moveDown(event){                    
const submenus = document.getElementsByClassName('sub-menu')                      
//var vision = document.getElementsByClassName('home-vision')[0]   
var vision = document.getElementById("navbar");


var sub     

    if(event.target.innerHTML === "About Us"){
        sub=submenus[0]
    }else{
        sub=submenus[1]
    }

var rect = sub.getBoundingClientRect();         
vision.style.marginBottom = rect.height + "px"      
}


function moveUp(event){ 
//var vision = document.getElementsByClassName('home-vision')[0] 
var vision = document.getElementById("menu-1");
vision.style.marginBottom = 0   
}


(function(){


var aboutUs = document.getElementsByClassName('aboutUs')[0] 
var takeAction = document.getElementsByClassName('takeAction')[0] 

aboutUs.addEventListener("click", function(event){
event.preventDefault()
})

takeAction.addEventListener("click", function(event){
event.preventDefault()
})      

aboutUs.addEventListener('mouseover', function(event) {moveDown(event)},{passive: false})
takeAction.addEventListener('mouseover', function(event) {moveDown(event)},{passive: false})  

aboutUs.addEventListener('mouseleave', function(event) {moveUp(event)},{passive: false})
takeAction.addEventListener('mouseleave', function(event) {moveUp(event)},{passive: false})     
})()

вот ссылка на сайт

Вот конкретные проблемы:

1) слушатели, чтобы предотвратить действие щелчка по умолчанию, находятся на элементах главного меню "о нас "и" принять меры ", но мешают действию в подменю, а не в элементе главного меню

2) mouseleave должен работать только когда вы покидаете элемент или внутренние элементы. Кажется, это работает над «принять меры», а не над «о нас», где похоже, что оно работает как событие отключения мыши.

Я пытаюсь привести рабочий пример. Это действительно хорошее дело, и ваша помощь очень ценится.

ОБНОВЛЕНИЕ:

глядя на этот кусок кода:

<li class="aboutUs">About Us
         <ul class='sub-menu'>
            <li><a href="https:\\yahoo.com">Home</a>Our Story</a></li>
            <li><a href="https:\\yahoo.com">SWAG Leaders</a></li>
            <li><a href="https:\\yahoo.com">In The News</a></li>
          </ul>
</li>

Мы хотим отключить щелчок наслова «О нас» (которые не являются ссылками), но по-прежнему включен клик в подменю ul

Answer 1

В этой части вашего кода

aboutUs.addEventListener("click", function(event){
    event.preventDefault()
})

Вы можете проверить event.target и убедиться, что это правильный щелчок, чтобы предотвратить как

aboutUs.addEventListener("click", function(event){
    if(event.target.innerText === "About Us") {
         event.preventDefault()
    }
})