stopPropagation在這種情況下不起作用

Question

好的，我不知道如何搜索，這很簡單，卻無法在任何地方得到答案...

基本上，我使用XML來填充列表。 當單擊第一層li時，會發生什么情況，它將所有不同的郊區添加到孩子ul中。 然后將生成以下結構：

<li class="province-active" style="background-image: url(&quot;img/minus-icon-storefinder.png&quot;);">
  <p>Gauteng</p>
  <ul class="province-sub-menu">
    <li class="province-sub-nav-item" data-suburb="Strijdom Park">Strijdom Park,Randburg</li>
    <li class="province-sub-nav-item" data-suburb="Edenvale">Edenvale,Eastrand</li>
    <li class="province-sub-nav-item" data-suburb="Strubens Valley">Strubens Valley,Roodepoort</li>
    <li class="province-sub-nav-item" data-suburb="Centurion">Centurion,Pretoria</li>
  </ul>
</li>

好的問題是，使用下面的JQuery，它首先觸發“ province-sub-nav-item”的click事件，然后觸發“ province-active”的click事件（父li）。 這是我為孩子li使用的JS。

$(document).on("click", ".province-sub-nav-item", function(e){
    e.stopPropagation();
    $shop = $(this).attr("data-suburb");
    loadShop($shop);
});

這是父級li的功能。

$(".province-active").click(function(e) {
    $li = $(this);
    $province = $li.children("p").text();
    $(".store-locations").css("width", 375);    
    getMap($li, $province, 15); 
});

因此，基本上，我只需要在不為“ province-active”和stopPropagation（）觸發click事件的情況下就不會觸發“ province-active”的click事件。 不起作用。

多謝你們。

Answer 1

這是因為您已使用了事件委托並將處理程序綁定到文檔對象。

因此，當事件起泡時，將在觸發文檔對象處理程序之前觸發province-active元素處理程序，因此停止傳播沒有任何效果。

演示： 小提琴 -查看控制台中的登錄順序

一種可能的解決方案是將事件委托也用於province-active元素

$(document).on("click", ".province-active", function (e) {
    var $li = $(this);
    var $province = $li.children("p").text();
    $(".store-locations").css("width", 375);    
    getMap($li, $province, 15);
});

演示： 小提琴 -查看控制台中的登錄順序

另外，這也可以：

$(".province-sub-menu").on("click", ".province-sub-nav-item", function(e){
    e.stopPropagation();
    $shop = $(this).attr("data-suburb");
    loadShop($shop);
});