jquery - 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;   
    }
});

js小提琴。

或者这可能与多个颜色选择器一起工作得更好......

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

js小提琴。

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/