結束 JQuery 事件冒泡

Question

這真的很簡單……但由於某種原因，我無法讓它工作。 下面的 JQuery 只是通過單擊為 sideNav 欄上的選擇設置背景動畫。 但是，如果我們要在半秒/秒范圍內單擊多個項目，則不止一個項目會發生動畫。 （因此看起來像是一次選擇了多個項目。）

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()。 希望能幫助到你..