jQuery stopPropagation不工作

Question

我使用了下面的选色器，它工作得很好，但是当我点击颜色选择器图标时，我不想让它泡到身体上。所以我尝试了以下步骤，现在颜色选择器不起作用了。

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

如果您从jsfiddle中删除下面的代码，那么它就能工作。是什么导致了这一切

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

Answer 1

它似乎使用了自己的样式代码，其中允许事件冒泡并在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/