javascript - 将事件添加到列表子节点

Question

我的导航栏中有一个列表，其中有一个用作下拉菜单的列表。整个列表被命名为类别(我知道它应该引用另一个页面，但我只是想让动态内容首先工作)。

我有一个附加到此元素的事件监听器，它将用户带到显示所有类别的页面。

当您将鼠标悬停在此元素上时，它会显示类别列表。我想做的是能够单击其中之一，然后将用户直接带到该类别。

这适用于我的代码，但仅限于某些地方。在其他情况下，它会将我带到显示所有类别的页面。

这是我用来添加事件的代码:

var categoryHeading = document.getElementById('categoriesNav');

dropList = document.createElement("ul");
dropList.setAttribute("id", "categoriesDrop");
categoryHeading.appendChild(dropList);

categoryHeading.addEventListener('click', displayCategoriesPage); //displayCategoriesPage displays a page with all categories listed
categoryHeading.addEventListener("mouseover", function(){
  if(dropList){
    dropList.style.display = "block";
  }
});

categoryHeading.addEventListener("mouseout", function(){
  if(dropList){
    dropList.style.display = "none";
  }
});

var categoryListItems = document.getElementsByClassName("categoryListItem");
for(var i=0; i<categoryListItems.length; i++){
  categoryListItems[i].addEventListener("click", function(e){
    displaySingleCategory(e); //Displays the page with all items from one category
  });
}

这是 HTML:

<nav>
  <ul>
    <li id="homeNav"></li>
    <li id="categoriesNav">
      <a>Categories</a>
      <ul id="categoriesDrop">
        <li class="categoryListItem">Outdoor</li>
        <li class="categoryListItem">Technology</li>
      </ul>
    </li>
    <li id="basket"></li>
    <li id="search"></li>
  </ul>
</nav>

我假设问题与我的 <nav> 的方式有关已布置。或者我在哪里添加了事件。

Answer 1

在 Javascript 中，每当触发事件时，它的默认行为都是通过 DOM 向上冒泡。

在您的情况下，您需要停止事件传播，因为您的子 li 中有一个点击监听器，并且它的父级将被执行，显示类别页面而不是特定类别页面。

尝试将 e.stopPropagation(); 放入您的子事件监听器中。