Question

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

如果从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;   
    }
});

或者使用多个颜色选择器可能会更好...

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

Answer 2

就像@alex提到的那样，颜色选择器似乎是使用live()在整个文档上聆听点击。在阻止传播之前，您可以检查事件是否来自颜色选择器，如果它发生则让它冒泡。您需要使用closest()，因为可以点击颜色选择器图标的<span>容器或里面的<img>元素。

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