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/