將一個事件添加到列表子節點

我在我的導航欄中有一個列表，裏面有一個列表用作下拉菜單。整個列表被命名爲categories（我知道它應該有一個對另一個頁面的引用，但我只是試圖讓動態內容首先工作）。將一個事件添加到列表子節點

我有一個事件監聽器附加到這個元素，它將用戶帶到顯示所有類別的頁面。

當您將鼠標懸停在此元素上時，它會顯示一個類別列表。我想要做的是能夠點擊其中的一個，並使用戶直接進入該類別。

這適用於我的代碼，但只適用於某些地方。在其他情況下，我需要顯示所有類別的頁面。

這裏是我使用添加事件的代碼：

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>的佈局方式做。或者我添加了事件。

來源

2015-04-25 Adam

問題出在你沒有顯示的'displaySingleCategory'內。我會猜測並說你不會停止事件傳播，所以這兩個事件都會立即啓動。請參閱https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation。您可能還希望將事件委託與單個偵聽器一起使用，因爲它比多個偵聽器更容易維護（請參閱http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript /）。我不明白你爲什麼從一個匿名函數中調用'displaySingleCategory'，而不是將它指定爲一個監聽器本身。 –

在Javascript中，無論何時觸發事件，默認行爲都是通過DOM冒泡。

在你的情況，你需要停止事件傳播，因爲你有一個點擊監聽器在兒童裏，它的父母將執行顯示你的類別頁面，而不是特定的類別頁面。

嘗試將e.stopPropagation();放入您的子事件偵聽器中。

來源

2015-04-25 19:07:12

謝謝！這是一個夢想！ – Adam

將一個事件添加到列表子節點

回答

相關問題