javascript - 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 的作用:

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

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