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做：

阻止事件從冒泡DOM樹，阻止任何父處理程序被通知事件。

正如評論所說，如果你喜歡，你可以或者在事件處理程序使用return false（在這種特殊情況下，據我反正可以告訴我們 - 這也將導致preventDefault這可能不是你想要的即將發生）。我的個人偏好是使用stopPropagation，但完全取決於您。

Answer 2

您可以通過使用jQuery的綁定函數和preventBubble參數來避免冒泡事件。

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