在.live()处理时,是否可以阻止传播给父项的子点击事件？

Question

我在这里的图像和内容上有"Back Board":http://syndex.me 所以基本上,你点击一个图像,它会在点击的内容上方覆盖一个信息面板.

我想做两件事:

• 单击站点的背景以淡出当前打开的信息面板
• 能够点击信息面板中的标签,链接或社交图标,而不会触发它的父功能,后者再次淡出.

我无法使用stopPropagation将子点击替换为父点击,因为我需要点击事件由.live()处理(请参阅文档)这是因为帖子是动态加载的.

我不能只说出这样的话:$("#Background").click(function(){//淡出信息板}因为整个帖子包装器都覆盖了它,我不能把事件放在帽子上因为那时我甚至更深入地了解父母接管孩子们事件的困境:-)

到目前为止,我至少能够只有一个infoboard打开(即我点击一个图像,然后另一个,它将关闭已经打开的图像,并打开当前的一个.所以这部分都很好:

    $('.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'));
    }
});