嵌套列表，jquery和stopPropagation

Question

我遇到了一個問題，嵌套的菜單不像我期待的那樣行事。我已經瀏覽了StackOverflow上關於stopPropagation（）的一些內容，但它似乎並沒有工作。

該網站是基於WordPress的，不幸的是，所以我沒有直接控制網站上的菜單生成的HTML。這個項目的最初目標是爲菜單項添加onClick功能，而WordPress本來不支持。這部分工作 - 當我點擊菜單，事件觸發。好極了！但是，父元素的事件也會觸發。這就是問題所在（因爲onClick功能已經實現了點擊跟蹤）。

這是菜單的第一部分，因爲它使由WordPress（縮短了可讀性）：

<ul id="menu-main-menu" class="nav-menu"> 
    <li id="menu-item-104"><a href="#">Learn About Us</a> 
     <ul class="sub-menu"> 
      <li id="menu-item-266" class=""><a href="#">What We Do</a></li> 
      <li id="menu-item-268" class=""><a href="#">Company News</a></li> 
      <li id="menu-item-269" class=""><a href="#">Our Leadership</a></li> 
      <li id="menu-item-557" class=""><a href="#">Recognition</a></li> 
      <li id="menu-item-270" class=""><a href="#">Our Heritage</a></li> 
      <li id="menu-item-331" class=""><a href="#">Brand Guidelines</a></li> 
     </ul> 
    </li> 
</ul> 

下面是被附加到頁的菜單的生成jQuery代碼：

jQuery(document).ready(function($) { 
    $("li#menu-item-104 a").on("click", function(event) { 
     console.log('Learn About Us menu'); 
    }); 
    $("li#menu-item-266 a").on("click", function(event) { 
     console.log('What We Do menu'); 
    }); 
    $("li#menu-item-268 a").on("click", function(event) { 
     console.log('Company News menu'); 
    }); 
    $("li#menu-item-269 a").on("click", function(event) { 
     console.log('Our Leadership menu'); 
    }); 
    $("li#menu-item-557 a").on("click", function(event) { 
     console.log('Recognition menu'); 
    }); 
    $("li#menu-item-270 a").on("click", function(event) { 
     console.log('Our Heritage menu'); 
    }); 
    $("li#menu-item-331 a").on("click", function(event) { 
     console.log('Brand Guidelines menu'); 
    }); 
}); 

當我點擊任何子元素（我們做什麼，公司新聞等）時，onclick事件成功觸發並且父元素也觸發。

所以，如果我點擊「公司新聞」菜單項，控制檯將包含這樣的：

Learn About Us menu 
Company News menu 

起腳是，如果我加入event.stopImmediatePropagation（）;到每個jquery塊，只有父元素會觸發。 event.stopPropagation（）;似乎沒有任何影響。

我需要添加到jQuery中以防止在調用子元素時觸發父元素？

Answer 1

問題是你已經使用後代選擇器而不是子選擇器來定位錨元素。

$("#menu-item-104 > a").on("click", function (event) { 
    console.log('Learn About Us menu'); 
}); 
$("#menu-item-266 > a").on("click", function (event) { 
    console.log('What We Do menu'); 
}); 

演示：Fiddle

當你說li#menu-item-104 a，它結合了單擊處理程序裏面li#menu-item-104所有的錨元素，其中包括Learn About Us元素，所有這些是導致該處理程序中的子菜單項目獲取調用即使你試圖阻止傳播。

現在，由於第一個處理程序已添加到所有錨元素，因此stopPropagation()不會產生任何影響。