Добавление события в список дочернего узла

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(); на прием детей.