防止在错误的元素上发生默认值，并且 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()
    }
})