事件也被点击了子元素触发

我得到了以下结构： - 嵌套UL事件也被点击了子元素触发

<ul class="depth-one"> 
    <li>Category 1 
     <ul class="depth-two"> 
      <li > Category 1.1</li> 
      <li> Category 1.2</li> 
      <li> Category 1.3</li> 
     </ul> 
    </li> 
    <li> Category 2 
     <ul class="depth-two"> 
      <li>Category 2.1</li> 
      <li>Category 2.2</li> 
      <li>Category 2.3</li> 
     </ul> 
    </li> 
    <li>Category 3 
     <ul class="depth-two"> 
      <li>Category 3.1</li> 
      <li>Category 3.2</li> 
      <li>Category 3.3</li> 
     </ul> 
    </li> 
</ul>

我已经应用了CSS规则：

ul{ 
    list-style: none; 
    padding:0; 
    margin:0; 
} 
.depth-one{ 
    display:block; 
} 
.depth-two{ 
    display:none; 
}

只留下显示MAIN类别。

$(document).ready(function() { 
    $(".depth-one > li").click(function() { 
     selector = $(this).find(' > .depth-two'); 
     if($(selector).css("display") == "none"){ 
      selector.slideDown(800); 
     } else { 
      selector.slideUp(800); 
     } 
    }); 
});

这一个，当点击MAIN类别时切换SUB类别。

这里是一个小提琴证明：http://jsfiddle.net/NB4bN/1/

现在，你可以看到，当我点击子类别，品类全，滑，任何想法，为什么？

我试图实现，只有当我点击主要类别时，子类别将向上滑动，否则，当我点击子<li>项目时没有任何反应。

来源

2013-08-06 kfirba

因为点击仍在li中，即使它在li内。 – smerny

任何想法如何解决这个问题？ – kfirba

这里是你的问题的解决办法：http://jsfiddle.net/smerny/NB4bN/2/

$(document).ready(function() { 
    $(".depth-one > li").click(function (e) { 
     if (e.currentTarget == e.target) { 
      selector = $(this).find(' > .depth-two'); 
      if ($(selector).css("display") == "none") { 
       selector.slideDown(800); 
      } else { 
       selector.slideUp(800); 
      } 
     } 
    }); 
});

我添加了检查，看是否currentTarget和target是相同的。所以你知道点击是在你的李或李本身的一个元素上。

来源

2013-08-06 19:42:34 smerny

完美的作品！非常感谢！如果可能的话，我想请你解释一下关于这个e.currentTarget和e.target的一些信息，但是他并没有真正理解它们的不同或者它们的用法。 – kfirba

@kfirba下面是几个日志语句，将显示两者之间的区别：http://jsfiddle.net/smerny/NB4bN/4/ - 您会注意到，如果您点击子li，目标将是子li，而currentTarget将永远是与您的绑定选择器匹配的li。 – smerny

我没有看到两个调用之间有任何区别，他们都为我产生相同的输出（控制台） – kfirba

一个简单的办法是通过将停止事件冒泡：

$('li li').click(function (e) { 
    e.stopPropagation(); 
});

jsFiddle example

.stoppropagation()防止事件向上冒泡DOM树。因此，上面的块做的是查找其他列表项的子项的任何列表项，并且每当它注册一个点击时，它就会停止点击事件冒泡DOM。

来源

2013-08-06 19:42:55 j08691

嘿！感谢您的解决方案！我想请求你让我的解决方案，我不喜欢使用代码，我不明白它是什么:) 你能解释我，这stopPropagation（）函数，并为什么你选择李丽'作为你的选择？谢谢！ – kfirba

当然，答案已更新。如果您仍然有疑问，请告诉我。 “ – j08691

”可防止事件冒泡DOM树。“这意味着什么> _ <？ – kfirba

事件也被点击了子元素触发

回答

相关问题