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();放入您的子事件侦听器。

将事件添加到列表子节点

1 个答案: