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/