jQuery单击事件覆盖彼此

Question

我有以下jQuery:

$('.io-sidebar-section').click(function () {
      console.log('Section Clicked');
      $(this).next().fadeToggle('fast',function(){});
    });

    $('.io-sidebar-section-advanced-toggle').click(function(){
      $(this).parent().next().children('.io-sidebar-link-advanced').fadeToggle('fast',function(){});
    });

高级切换在侧栏部分内.当我单击高级切换时,它会执行侧边栏部分单击.

我怎么能将这两个分开？

Answer 1

您可以在子元素stopPropagation的click事件处理程序中使用事件对象的方法:

$('.io-sidebar-section-advanced-toggle').click(function(e){
    e.stopPropagation();
    $(this).parent().next().children('.io-sidebar-link-advanced').fadeToggle('fast',function(){});
});

从jQuery文档中,这是做什么的stopPropagation:

防止事件冒泡DOM树,防止任何父处理程序被通知事件.

正如评论中所提到的,如果您愿意,也可以return false在事件处理程序中使用(在这种特殊情况下,据我所知 - 它也可能导致preventDefault可能不是您想要发生的事情).我个人的偏好是使用,stopPropagation但这完全取决于你.