Можно ли остановить события щелчка дочерних элементов, распространяющиеся на родителей при обработке .live ()?

Question

У меня есть 'Back Board' на моих изображениях и контенте здесь: http://syndex.me Таким образом, в основном, вы нажимаете на изображение, оно будет перекрывать информационную панель над нажатием на контент.

Я хочу сделать две вещи:

• Нажмите на фон сайта, чтобы скрыть открытую в данный момент информационную панель
• Возможность щелкнуть тег, ссылку или значок социальной сети на информационной панели, не вызывая родительскую функцию, которая снова исчезает.

Я не могу использовать stopPropagation для дочернего клика, заменяемого родительским кликом, поскольку мне нужно, чтобы события кликов обрабатывались .live () (см. Документацию) Это связано с тем, что сообщения динамически загружается.

Я не могу просто сказать что-то вроде: $ ("# Background"). Click (function () {// затухание информационной панели} Потому что это покрывается всей почтовой оболочкой, и я не могу поставить событие в шапку, потому что тогда я еще глубже в дилемме родителей, принимающих детские мероприятия: -)

Пока у меня по крайней мере есть возможность открыть только одну информационную панель (т.е. я нажимаю на одно изображение, затем на другое, оно закрывает уже открытое и открывает текущее. Так что эта часть хороша:

    $('.theContent:not(.clicked)').live("click", function () {
            $(this).children('.postInfo').fadeIn(400);
            $(".clicked").each(function() {
                    $(this).find('.postInfo').fadeOut(400);
                    $(this).removeClass('clicked');
            });
        $(this).addClass("clicked");
 });
     $('.clicked').live("click", function () {
            $(".clicked").each(function() {
                $(this).find('.postInfo').fadeOut(400);
                $(this).removeClass('clicked');
            });
 });

Re .live (), .delegate () и .stopPropogation ():

Поскольку метод .live () обрабатывает события после того, как они распространяются на верхнюю часть документа, невозможно остановить распространение живых событий. Аналогично, события, обрабатываемые .delegate (), распространяются на элементы, которым они делегированы; обработчики событий, связанные с любыми элементами ниже этого в дереве DOM, уже будут выполнены к тому времени, когда будет вызван делегированный обработчик событий. Следовательно, эти обработчики могут препятствовать запуску делегированного обработчика, вызывая event.stopPropagation () или возвращая false.

Answer 1

Как насчет простой проверки того, произошло ли событие на конкретном элементе:

function activate(el) {
    el.find('.postInfo').fadeIn(400);
    el.addClass('clicked');
}
function deactivate(el) {
    el.find('.postInfo').fadeOut(400);
    el.removeClass('clicked');
}
$('.theContent:not(.clicked)').live('click', function(e) {
    deactivate($('.clicked'));
    activate($(this));
});

$('.clicked').live("click", function(e) {
    if (! $(e.target).is('a')) {
        // this should not trigger if a click occured on one of the links
        deactivate($(this));
    }
});

$('#ape').click(function(e) {
    if ($(e.target).is('#ape')) {
        deactivate($('.clicked'));
    }
});

Answer 2

Если вы свяжете событие с родительским элементом, оно не остановит свое событие распространения для своих дочерних элементов.

У вас есть два решения: связать событие с каждым потомком и поставить ТАМ вызов остановки распространения или просто проверить, кто передал событие click в родительском объекте. Я прсоналы нахожу более элегантным второе решение.

Вы можете прочитать об этом подробнее здесь: http://redfishmemories.blogspot.it/2014/08/jquery-prevent-event-propagation-and.html

Answer 3

Задумывались ли вы о привязке события click, когда сообщение динамически загружается? Таким образом, вы можете использовать stopPropagation ().

http://jsfiddle.net/rkw79/CzEj5/