html - .live() 处理时是否可以阻止子点击事件传播给 parent ？

Question

我的图像和内容上有“背板”:http://syndex.me所以基本上，您点击一张图片，它会在点击的内容上方覆盖一个信息面板。

我想做两件事:

• 点击网站背景淡出当前打开的信息面板
• 能够点击信息面板内的标签、链接或社交图标，而不会触发其父函数，该函数再次淡出。

我不能对被父点击取代的子点击使用 stopPropagation，因为我需要由 .live() 处理点击事件 (see documentation)这是因为帖子是动态加载的。

我不能只说这样的话: $("#Background").click(function(){//淡出信息板}因为整个帖子包装都涵盖了这一点，我不能把事件放在帽子上，因为那样我就更深地陷入了 parent 接管 child 事件的困境:-)

到目前为止，我至少可以打开一个信息板(即我点击一张图片，然后点击另一张，它会关闭已经打开的图片，并打开当前的图片。所以这部分都很好:

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

关于 .live()、.delegate() 和 .stopPropogation():

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning 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'));
    }
});