javascript - 结束 JQuery 事件冒泡

Question

这真的很简单......但由于某种原因，我无法让它工作。下面的 JQuery 只是通过单击为侧导航栏上的选择设置了背景动画。但是，如果我们要在半秒/秒范围内单击多个项目，则不止一个项目会发生动画。 （因此看起来像是一次选择了多个项目。）

应该取消动画事件event.stopPropogation();，不是吗？如果没有，我该如何解决这个问题？

$('.sidebar nav ul li').not('.user').click(function(event){
  event.stopPropagation();
    
  $('.sidebar nav ul li').css('background-size', '15px');
  $('.sidebar nav ul li').removeClass('active');
    
  $(this).animate({
'background-size': '100%'
  }, 500);

  setInterval(function(){
$(this).addClass('active');
    return true;
  },501);
});

Answer 1

stopPropagation就像它听起来的那样，它阻止事件传播到 DOM 中更高的父元素。
它不会停止动画，那就是stop()；

$('.sidebar nav ul li').not('.user').click(function(){

    $('.sidebar nav ul li').stop(true, true)
                           .css('background-size', '15px')
                           .removeClass('active');

    $(this).animate({
      'background-size': '100%'
    }, 500, function() {
        $(this).addClass('active');
    });
});

Answer 2

如果是动画，你应该更喜欢 event.stop() 而不是 event.stopPropagation()。希望能帮助到你..