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/