jQuery stopPropagation无效

我正在使用以下颜色选择器 ，它工作正常，但当我点击颜色选择器图标，我不希望它冒泡到正文。 所以我尝试了以下，现在颜色选择器不工作。

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

如果你从jsfiddle中删除下面的代码，那么它的工作原理。 造成这种情况的原因

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

Answer 1

它似乎使用自己的live()样式代码 ，允许事件冒泡并在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() ，因为可以单击颜色选择器图标的容器或内部的元素。

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

查看jsfiddle演示： http ： //jsfiddle.net/CWGgM/1/