jQuery stopPropagation不工作

Question

我使用以下color picker它工作正常，但是當我點擊顏色選擇器圖標時，我不想它冒泡到身體。所以我嘗試了以下，現在顏色選擇器不工作。

檢查http://jsfiddle.net/CWGgM/。

如果你從jsfiddle中刪除下面的代碼，那麼它的工作原理。是什麼原因造成這種

$('#test').click(function(e){ 
    e.stopPropagation(); 
}); 

Answer 1

這似乎是使用自己的live() style code，在事件被允許冒泡並在document進行處理。

因此，事件必須傳播到document或他們不會工作。

您可避免事件觸發機身採用以下解決方法......

$('body').click(function(event) { 
    if ($(event.target).parent()[0] == $('.mColorPickerTrigger')[0]) { 
     return true; 
    } 
}); 

jsFiddle。

或者，這可能與多個拾色器更好地工作......

$('body').click(function(event) { 
    if ($(event.target).parent().hasClass('mColorPickerTrigger')) { 
     return true; 
    } 
}); 

jsFiddle。

Answer 2

就像@alex提到的那樣，顏色選擇器似乎在使用live()來監聽整個文檔的點擊。在阻止傳播之前，您可以檢查事件是否源自顏色選擇器，如果它發生了，就讓它起泡。您需要使用closest()，因爲可以單擊顏色選擇器圖標的<span>容器或<img>元素。

$('#test').click(function(e){ 
    if($(e.target).closest('.mColorPickerTrigger').length) return; 
    e.stopPropagation(); 
}); 

檢查出的jsfiddle演示：http://jsfiddle.net/CWGgM/1/