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，它首先触发“省 - 子导航项”的点击事件，然后触发“省 - 活动”（父级）的点击事件。这是我正在为孩子们使用的JS。

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

这是父李的功能。

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

所以基本上，我只需要不触发“省活动”的click事件而不触发“省活动”和stopPropagation（）的click事件;没有用。

谢谢你们。

Answer 1

这是因为您已经使用了使用过的事件委托，并将处理程序限制为文档对象。

因此，当事件冒泡时，province-active元素处理程序将在触发文档对象处理程序之前被触发，因此您的停止传播不会产生任何影响。

演示：Fiddle - 查看登录控制台的顺序

一种可能的解决方案是使用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);
});

演示：Fiddle - 查看登录控制台的顺序

或者这也适用：

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

stopPropagation在这个实例中不起作用

1 个答案: