jQuery stopPropagation 不起作用

Question

我正在使用以下颜色选择器，它工作正常，但是当我单击颜色选择器图标时，我不希望它冒泡到身体。所以我尝试了以下内容，现在颜色选择器不起作用。

检查 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() ，因为可以单击颜色选择器图标的<span>容器或内部的<img>元素。

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

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