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

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

$('.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，但这完全取决于你。

Answer 2

您可以通过使用jQuery的bind函数和preventBubble参数来避免事件冒泡。

http://api.jquery.com/bind/

jQuery单击事件覆盖彼此

2 个答案: