防止在錯誤的元素上發生默認值，並且 mouseleave/mouseout 給出不一致的響應

Question

我試圖制作一個可行的片段，但這是在 wordpress 中完成的，目前無法。

這就是我們正在嘗試做的事情。 我們有一個包含 5 個項目的菜單。 這些顯示在 inline-block 中。 在五個項目中的兩個上，我們有一個以塊顯示的子菜單。 對於這兩個項目，我們希望禁用單擊事件，但仍然有鼠標懸停工作，並且在鼠標懸停時顯示子菜單並更改導航欄的底部邊距。 點擊事件需要對子菜單項起作用。 在 mouseleave 上，我們需要將下邊距改回 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()
    }
})