结束 JQuery 事件冒泡答案

【问题标题】：Ending JQuery Event Bubbling结束 JQuery 事件冒泡
【发布时间】：2013-09-03 17:54:08
【问题描述】：

这真的很简单......但由于某种原因，我无法让它工作。下面的 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);
});

【问题讨论】：

标签： javascript jquery event-handling jquery-animate jquery-events

【解决方案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');
    });
});

【讨论】：

如此明显。谢谢你的帮助！那行得通。我现在尽量不使用带有 CSS3 的 JQuery 动画，它真的让我陷入了一个循环。

【解决方案2】：

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

【讨论】：